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.