Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using React.useMemo to create a `handlers` object
// 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
@romellem

This comment has been minimized.

Copy link

@romellem romellem commented Jan 23, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment