To memoize or not to memoize ? Is the Question !

What is Memoization ?

Memoization is a technique in which a function's results are cached and returned, rather than recalculating them, when the same inputs occur again. This can significantly improve the performance of a program, especially when a function is called multiple times with the same arguments.

In React, memoization can be used to optimize the performance of functional components by preventing unnecessary re-renders. When a component is re-rendered, its props and state are checked for changes, and if there are no changes, the component is not updated. By using the useMemo hook, a component can cache the result of a expensive computation and only recalculate it when the inputs change.

How to memoize components ?

Here is an example of a simple functional component that uses useMemo to memoize the result of a calculation:

import { useMemo } from 'react';

function ExpensiveCalculation({ data }) {
  const result = useMemo(() => {
    // Expensive calculation
    let sum = 0;
    for (let i = 0; i < data.length; i++) {
      sum += data[i];
    }
    return sum;
  }, [data]);

  return <div>{result}</div>;
}

In this example, the useMemo hook is used to cache the result of the expensive calculation. The calculation is only performed when the data prop changes. This means that if the component is re-rendered with the same data prop, the cached result is returned, and the calculation is not performed again.

Another example is when you have a component that receives a function as prop, which is expensive to calculate and you want to memoize the prop function.

import { useCallback } from 'react';

function ParentComponent({ handleClick }) {
  const memoizedHandleClick = useCallback(handleClick, []);
  return <ChildComponent onClick={memoizedHandleClick} />;
}

In this example, the useCallback hook is used to memoize the handleClick function. This means that the function is only recreated if the dependencies passed to useCallback change.

In summary, memoization is a powerful technique that can be used to improve the performance of React applications by caching the results of expensive computations and preventing unnecessary re-renders. The useMemo and useCallback hooks are used to memoize the results of a calculation and prevent unnecessary re-creation of a function.

When to NOT memoize components ?

It is generally not recommended to memoize components if the component's props or state change frequently, as this can lead to poor performance and unexpected behavior. Memoizing a component can also make it difficult to track changes in the component's props and state, which can make debugging more challenging. Additionally, memoizing a component can make the codebase more complex and harder to understand.

If the component has a relatively simple render function and the props or state change infrequently, then memoization can be useful. But if the component has a complex render function and the props or state change frequently, then it may be better to not use memoization.