React Memoization: Do’s and Don’ts

Memoization in React is a powerful optimisation tool, but it should be used wisely. While it can help avoid unnecessary recalculations and re-renders, it also increases memory usage and can add complexity. Below are some guidelines to decide when to use and avoid these techniques.

When to avoid ?

a. When parent component renders only once — ❌ Not needed

When we know that the parent component is going to be rendered only once during its liftime and there is no chance the variable will be recreated, we should avoid memorising variables, functions and child components present inside such parent components.

b. While passing variable/function directly to native html element — ❌ Not needed

React efficiently handles event handlers like onClick, onChange. Unless the function is being passed to a custom component that causes unnecessary/wasted renders, wrapping it in useCallback won’t give any performance benefit.

const MyComponent = () => {
  const handleClick = useCallback(() => {
    // some operations
  }, []);

  return <button onClick={handleClick}>Click Me</button>; // No memo needed
};

c. To avoid recalculation of a small logic — ❌ Not useful

Small calculations (e.g. simple math or string manipulation) are fast. Using useMemo adds overhead and usually doesn’t improve performance.

// Unnecessary memo
const fullName = useMemo(() => first + ' ' + last, [first, last]);
return <span>{fullName}</span>;

// Better
const fullName = first + ' ' + last;
return <span>{fullName}</span>;

d. When child component renders are non significant — ❌ Not useful

We can not have any fixed set of rules to determine this. The goal here is to avoid premature optimisation. if the optimisation is not adding any benefit in performance then better not to use it. Some examples of such scenarios added below -

Get Sitaram Mulik’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example 1: If a component is simple and doesn’t re-render often, wrapping it in React.memo adds unnecessary memory usage and complexity. React.memo brings benefits only when there’s a chance of avoiding frequent re-renders.

// Overkill for such simple component
const Label = React.memo(({ text }) => <span>{text}</span>);

// Better: Just use plain component
const Label = ({ text }) => <span>{text}</span>;

Example 2: In below example we know that the ChildComponent is lightweight. Passing handleClick to it triggers unnecessary renders of ChildComponent, however we know that they are not expensive renders, then we should ignore memorising such functions.

const MyComponent = () => {
  const handleClick = () => {
    // some operations
  };

  return <ChildComponent handleClick={handleClick} />;
};

const ChildComponent = (handleClick) => {
  return <button onClick={handleClick} />;
}

When to use ?

a. If passing variable/function prop to custom component, triggers unnecessary/wasted renders AND, the custom component either contains heavy logic or re-renders frequently due to change in key prop ✅

In simple term, both the conditions should be met for using memorisation techniques. If due to any reason any variable or function is not causing any CPU intensive unnecessary renders of custom component, then we should avoid the memorization in such cases. Some of such common scenarios are mentioned in avoid section.

For example, in below example if we pass someFuncion without memorising it will trigger unnecessary rendering of the HeavyComponent and multiple occurances of the ListItem component, whenever parent component renders. These are the idle scenarios to implement react memorisation techniques.

const ParentComponent = () => {
  const someFuncion = useCallback(() => {
    // some operation
  }, [dep1, dep2]);
  
  return <div>
    <HeavyComponent someFuncion={someFuncion} />
    {list.map(item => <ListItem key={item.id} someFuncion={someFuncion} />)}
  </div>;
};

const ListItem = react.memo((someFuncion) => {
  // render logic
});

b. If using the variable/function added as dependancies in other react hooks ✅

We dont want to recall/recreate other react hooks like useEffect, useMemo or useCallback unnecessarily. When useEffect is called unnecessarily then it can have functional impact as well along with the application performance.

Conclusion:

React memorisation techniques should be used only to avoid unnecessary renders which can have impact on application’s performance. We need to carefully determine whether to use memorisation or not by considering multiple factors listed above.