Practices Every React Developer Should Know: Memoization
Welcome to the first article in our series, “Leveling Up: Practices Every React Developer Should Know.” In this article, we will focus on memoization in React applications. Memoization is a technique used to improve performance by caching the results of expensive function calls. We will cover three important tools for memoization in React: useCallback, useMemo, and React.memo. By using these tools, you can optimize the performance of your React applications and prevent unnecessary re-renders of components. Let’s dive in!
️️️☝️ Avoiding unnecessary re-renders is important for optimizing the performance of your React applications. By minimizing the number of times components are re-rendered, you can reduce the load on the browser and improve the speed and responsiveness of your application.
Why and How to Use useCallback in React
useCallback is a React hook that memoizes functions to improve performance. Memoization means caching the results of expensive function calls so that the same result can be returned without having to recalculate it each time the function is called.
One benefit of using useCallback is that it can prevent unnecessary re-renders of child components. When a component receives a new prop that is a function, it will re-render regardless of whether the function has actually changed. However, by using useCallback, you can create a memoized version of the function that will only update when its dependencies change.
For example, consider this code:
In the above code, the increment function is created using useCallback, so it will only be recreated when the setCount function changes. This means that the Childcomponent will not re-render unnecessarily when the Parentcomponent re-renders due to a state update.
Why and How to Use useMemo in React
useMemo is another React hook that memoizes values to improve performance. Memoization means caching the results of expensive function calls, so that the same result can be returned without having to recalculate it each time the function is called.
useMemo takes two arguments: a function that calculates the value to be memoized, and an array of dependencies that trigger the recalculation of the memoized value when they change. If the dependencies have not changed, the memoized value will be returned from the cache without recalculating.
One common use case for useMemo is to optimize the rendering of large lists. Consider this code:
The List component is rendering a list of items that first have to be filtered, then sorted, and finally rendered. This can be an expensive operation, especially if the list is very large.
To optimize this rendering, we can use useMemo to memoize the expensive operations:
So the filteredItems, sortedItems, and renderedItemsvariables are memoized using useMemo. This means that if the itemsprop has not changed, the expensive operations will not be recalculated, and the memoized values will be returned from the cache.
Why and How to Use React.memo
React.memo is a higher-order component that memoizes functional components to improve performance. It memoizes the component and only re-renders it if its props have changed since the last render.
Here is an example of using React.memo:
In this example, MyComponentis wrapped with React.memo, which will memoize the component and only re-render it if its prop1or prop2props have changed.
How it works with useMemo and useCallback
React.memo works well together with useMemo and useCallback to further optimize performance.
When a component is wrapped with React.memo, it will only re-render if its props have changed. However, if the component is using useMemo or useCallback to memoize expensive operations, it may not need to re-render even if its props have changed.
For example, consider this code:
MyComponent is wrapped with React.memo, and is also using useMemo to memoize the expensive operation of calculating memoizedValue. If prop1 has not changed since the last render, the memoized value will be returned from the cache and the component will not need to re-render, even though it is wrapped with React.memo. Moreover, we can use useMemo or useCallback on functions that we are passing as props to the child components. This would also help the memoized component avoid re-rendering.
Thanks for reading! In the next article, we’ll explore how to handle state in React (I swear it’s not that simple!). If you have any questions about this topic, I’d be happy to answer them in the upcoming article. Stay tuned for easy-to-follow tips and tricks for React.
