Performance Optimizations in React

If you have been working on big projects in React, If you are noticing the performance hit in any of your components then the concept of Memoization is maybe for you.

So first of all what is Memoization?

In computing, memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. — Wikipedia

In React, When your components rerenders?

There are mainly three reasons:

1. When its state changes.
2. When the props of the component change.
3. When the parent re-renders, by default the child will always rerender.

So here we are focusing on the third reason for rerendering. To prevent the rerendering of your child component, you can use the technique of Memoization in three different ways:

1. React.memo() — To Memoize your components
2. useMemo() — To Memoize a computed value
3. useCallback() — Memoize a function or event handler

In React, We can memoize components, functions, or just regular computed values.

Note: This performance optimization is not free, you need to compromise space for the speed.

Detailed explanation:

1. React.memo(): It is a higher-order component(HOC). If your component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result. React.memo only checks for prop changes. By default, it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.

function AnyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
     return true if passing nextProps to render would return
     the same result as passing prevProps to render,
     otherwise return false
  */
}
export default React.memo(AnyComponent, areEqual);

2. useMemo(): Returns a memoized value. Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

If no array is provided, a new value will be computed on every render.

const memoizedValue = useMemo(
    () => computeExpensiveValue(a, b)
, [a, b]);

3. useCallback(): Returns a memoized callback. Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Thanks :)