Using React.useMemo to create a `handlers` object

memoizedHandlers.js

// One of my new favorite React Hook patternms is to create handler
// functions for a custom hook using `React.useMemo` instead of
// `React.useCallback`, like so:

function useBool(initialState = false) {
  const [state, setState] = React.useState(initialState)
  
  // Instead of individual React.useCallbacks gathered into an object
  // Let's memoize the whole object. Then, we can destructure the
  // methods we need in our consuming component.
  const handlers = React.useMemo(() => ({
    setTrue: () => { setState(true) },
    setFalse: () => { setState(false) },
    toggle: () => { setState(s => !s) },
    reset: () => { setState(initialState) },
  }), [initialState])
  
  return [state, handlers]
}

// Makes it super simple to make a whole bunch of methods stable,
// preventing unnecessary rerenders

Interesting pattern @kyleshevlin, thanks for sharing!

Can you explain why you are passing initialState as a dependency for the useMemo call? I'm not sure how that could change between re-renders.

Thanks.