How to optimize React renders with useMemo and useCallback

Short answer

Wrap expensive calculations in useMemo and pass stable function references with useCallback to child components that rely on reference equality. For broader performance tuning, see how to improve core web vitals. For component architecture, see what are react server components.

Steps

1. Identify expensive computations inside components
2. Wrap with useMemo(() => compute(data), [data])
3. Wrap callbacks passed to optimized children with useCallback
4. Ensure dependency arrays are complete and correct
5. Profile with React DevTools Profiler before and after

Tips

• Do not memoize everything; only optimize measured bottlenecks
• useCallback is most useful when passed to memoized child components
• For authentication flows that trigger re-renders, see how to implement authentication in react