Who likes React custom Hooks?

Here are 8 that I found especially helpful or particularly interesting

useInitialMount - returns whether or not the current render is the first

/thread

usePrevious - returns the previous value of a prop or state

So common it's in the React Hooks FAQ but that one has a potential gotcha where prev value can get overwritten when comp re-renders for other reasons

This only updates prev value if it differs from new val

useUniqueId - Returns a unique ID that remains constant across component renders. Great for auto-generating IDs for DOM elements

There was a proposal for a built-in Hook called `useOpaqueIdentifier` but I'm not sure what happened to it

(uses `useInitialMount` )

useIsMounted - returns whether or not the component is mounted. Useful for async effects that may return after the component has been unmounted

useMedia - updates when the state of a CSS media query changes with `matchMedia`

(uses `useIsMounted` )

useRafState - creates an alternate `setState` method which only updates after `requestAnimationFrame`. Great for debouncing events that fire a lot

useWindowScroll - tracks the window scroll position as it changes. Good for sticky elements, horizontal carousels, etc.

(uses `useRafState` to debounce )

useDeepCompareEffect - A `useEffect` alt using deep equality on deps instead of strict equality so using objects/arrays is easier in deps

Will need to update react-hooks/exhaustive-deps ESLint rule to validate this Hook too

Less performant so shouldn't use everywhere

Flavors of most of these React custom Hooks can be found in the `react-use` package. It has tons more too that you should definitely check out

https://github.com/streamich/react-use

I already put together all 8 of these custom Hooks w/ implementations, code comments & use cases in my latest post

(no need to unroll the thread )

What custom Hooks do you find yourself using a lot?

https://www.benmvp.com/blog/8-helpful-custom-react-hooks/?utm_source=twitter&utm_medium=social&utm_campaign=init-share

Aaaaaand if you like these types of explanatory posts, make sure you subscribe to the MVP Newsletter. I jump around between React, JavaScript, TypeScript, DivOps & other frontend-related topics https://www.benmvp.com/subscribe/?utm_source=twitter&utm_medium=social&utm_campaign=8-helpful-custom-react-hooks