Search⌘ K
AI Features
Home
Courses
Advanced React Patterns With Hooks

The Props Collection Pattern in Practice

Explore how to apply the Props Collection Pattern in React hooks to standardize prop handling. Understand how to create and expose memoized prop objects like togglerProps to simplify toggle elements and improve component integration with hooks.

We'll cover the following...

The Props Collection

Take a look at the props collection for the useExpanded hook:

Javascript (babel-node)
export default function useExpanded () {
  const [expanded, setExpanded] = useState(false)
  const toggle = useCallback(
    () => setExpanded(prevExpanded => !prevExpanded),
    []
  )
  // look here 👇
  const togglerProps = useMemo(
    () => ({
      onClick: toggle,
      'aria-expanded': expanded
    }),
    [toggle, expanded]
  )
  ...
  return value
}

Within useExpanded we’ve created a new memoized object, ...