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.
  

• 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.
  

• 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.
  

• 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.

The above is the detailed content of React Memoization Cheat Sheet. For more information, please follow other related articles on the PHP Chinese website!