React Memoization Cheat Sheet

React provides three main tools for memoization to optimize component performance by minimizing unnecessary re-renders and re-computations:

1. useMemo – Memoize Computed Values

• Purpose: Caches the result of a computation, only re-calculating if dependencies change.

• Usage: Use for expensive calculations or derived data that should only update with specific dependencies.
  

  const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
  
  

• Best Practices:

  • Include all dependencies used within the function in the dependency array.
  • Avoid creating new references (arrays, objects) or inline functions within useMemo.
  • Note: Don’t use useMemo for functions; it caches values, not function references.

2. useCallback – Memoize Function References

• Purpose: Caches a function reference, preventing re-creation on each render.

• Usage: Use for stable function references, especially for callbacks (e.g., event handlers) passed to child components.
  

  const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
  
  

• Best Practices:

  • Include all dependencies used within the function in the dependency array to avoid stale values.
  • Avoid declaring inline functions within useCallback, as this can break memoization.
  • Note: Use useCallback for functions only. Misusing useCallback for values results in inefficient code with unnecessary function calls.

3. React.memo – Memoize Entire Components

• Purpose: Prevents a functional component from re-rendering if its props haven’t changed.

• Usage: Use to optimize child components that don’t need to re-render when the parent changes.
  

  const MemoizedComponent = React.memo(ChildComponent);
  
  

• Best Practices:

  • Use with components receiving stable props or props that rarely change.
  • Avoid frequent changes in props (like new objects/arrays) to maximize React.memo’s effectiveness.
  • Note: Works well with useCallbackmemoized functions to maintain stable props passed to child components.

Key Points to Remember

• Use useMemo for values and useCallback for functions.
  • Using useMemo for functions results in immediate execution, not a stable function reference.
  • Using useCallback for values returns a function, which leads to inefficient code with extra function calls.
• Memoization Summary:
  • useMemo: Caches computed values (return values of functions).
  • useCallback: Caches function references (callbacks).
  • React.memo: Caches entire components based on props to prevent re-renders from parent updates.
• Selectively Use Memoization: Memoization improves performance when used correctly but can add complexity if overused or misused.