## The cost of `useMemo`

One of the most common React anti-patterns is wrapping every single variable and function in `useMemo` and `useCallback`.

What developers fail to realize is that `useMemo` *is not free*. Every re-render, React still has to execute the `useMemo` hook, allocate an array, and perform a shallow equality check (`Object.is`) on every item in the dependency array.

### FAQ

**Q: When should I actually use `useMemo`?**
A: Only use it when the calculation you are preventing takes longer than ~5-10ms (like mapping array of 5,000 objects), OR if the variable is passed down to an aggressively memoized (`React.memo`) pure child component where maintaining referential equality will bypass a massive VDOM reconciliation tree.