React Performance Hooks

Performance optimization isn't free. useMemo and useCallback use memory to "Remember" results. If you use them everywhere, you might actually make your app Slower because the cost of checking the dependencies is greater than the cost of the re-render.

1. useMemo (Result Memoization)

Caches the **Return Value** of a function. Use it for heavy calculations:

const sortedList = useMemo(() => heavySort(list), [list]);

2. useCallback (Instance Memoization)

Caches the **Function Instance** itself. In JS, () => {} === () => {} is FALSE because they are different memory pointers. If you pass a raw function to a React.memo() child, the child will re-render every time. useCallback prevents this by keeping the pointer consistent.

4. Interview Mastery

Q: "Should I wrap every function in useCallback?"

Architect Answer: "Absolutely not. In 95% of cases, the cost of re-creating a simple function is negligible. `useCallback` should only be used when: 1) The function is a dependency for a `useEffect` in another component, or 2) The function is passed as a prop to a component wrapped in `React.memo`. Premature optimization is the root of all evil in frontend development."