❮ Previous Next ❯

Memoization

  • This lesson introduces memoization in React and explains how it improves performance by avoiding unnecessary renders.

  • Memoization

    What is Memoization?

    Memoization is a technique to store the result of expensive calculations and reuse them when inputs don’t change.

    React provides built-in memoization tools.

    React.memo

    React.memo prevents re-rendering of a component if props don’t change.

    Example:

const Child = React.memo(({ value }) => {
  console.log("Rendered");
  return <p>{value}</p>;
});

  • Child renders only when value changes.

    Avoiding Unnecessary Re-renders

    Ways to reduce re-renders:

    • Use React.memo

    • Use useCallback for functions

    • Use useMemo for calculations

    • Avoid inline functions when possible

    Less re-renders = better performance.

❮ Previous Next ❯