How to avoid unnecessary re-render in React

React is pretty popular right now, and there’s plenty of documentation out there that can help you prevent re-rendering components over and over again. However, many new Devs also sometimes find it difficult to fix the fact that their components keep re-rendering when they are not needed. There are actually ways to avoid this re-render problem.

In this article, we will discuss 5 ways to avoid unnecessary re-rendering in React components.

1. Memoization using useMemo() and UseCallback() Hooks

Memoization only allows your code to re-render components if there are changes in the props . With this technique, you can avoid unnecessary renders and reduce the computational load in your applications.

React provides two Hooks to perform Memoization :

• useMemo()
• UseCallback()

These Hooks reduce re-render by caching and returning the same result if the inputs are the same without any computation. When the input changes, the cache is invalidated and the new state component is re-rendered .

useMemo()

To understand how to use the useMemo() Hook, consider an example of multiplying 2 numbers.

The above function will compute the result and re-render the component every time it is called, regardless of the input. However, if we use the useMemo() Hook, we can avoid re-rendering the component if the input is the same and cache the result.

Now, the calculation result is stored in the cachedValue variable and the useMemo() Hook will return that result unless the input is changed to perform the calculation again.

UseCallback()

UseCallback() is another React Hook to perform Memoization. But, unlike useMemo() , it doesn’t cache the results. Instead, it stores the callback function provided to it.

For example, consider a component with a clickable item list.

In the above example, useCallBack() stores the callback of the function that was called when the onClick event was triggered. So it won’t render the component again if the user clicks on the same item multiple times.

2. Optimize API Calls with React Query

It is very common to use useEffect() Hook for asynchronous fetch operations in React applications. However, when useEffect() fetches data on every render and in most cases it keeps loading the same data.

We have a solution to solve this that can use the React Query library to store response data. When we make an API call, React Query will first return data from the cache before continuing with the request . It will then retrieve the data from the server and if there is no new data, it will prevent the component from re-rendering.

The React Query library has over 1 million Downloads on NPM weekly and over 1.3 thousand stars on GitHub .

3. Reselect

Reselect is a third-party React library for creating Memoization selectors. It is often used with Redux stores and has great features to reduce unnecessary re-rendering.

• Reselect is capable of calculating render data.
• Reselects do not recalculate unless their arguments are changed.
• They can be used as input for other selectors.

Reselect provides an API called createSelector and it can create Memoization functions. To understand better, let’s look at the example below.

Here, createSelector takes 2 selectors as input and returns the Memoized version. Selectors will not be recalculated with this Memoized version until the values ​​are changed.

Reselect library has more than 6 million Downloads on NPM weekly and more than 18.4 thousand stars on GitHub .

4. Replace useState() with useRef()

useState() Hook is widely used in React applications to re-render components when state changes. However, there are cases where we need to track state changes without re-rendering components.

If we use useRef() Hook then we can track state changes without causing component re-render.

The above example has a toggle that changes the state because the app will re-renders the component every time the value changes. But its counter value still exists because it is a mutable ref reference. When we are using same useRef() , it will only render only. However, if we use useState() , it will cause 2 impressions for each toggle ( toggle ).

5. Using React Fragments

If you’ve worked with React for quite some time, you know that React requests wrap components with a single parent component. Although it is not directly related to re-render, did you know that it affects overall component render time.

As a workaround, you can also use React Fragments to wrap components and it will reduce the load on the DOM, resulting in faster render times and reduced memory usage.

Roundup

In this article, I discussed 5 different ways to prevent unnecessary re-rendering in React components. Most of these solutions take advantage of caching and you can use the built-in React Hooks or libraries or use 3rd party to implement them.

In addition, these functions will improve application performance and prevent unnecessary re-rendering while reducing memory load.

As always, I hope you enjoyed this article and learned something new.

Thank you and see you in the next posts!

If you find this blog interesting, please give me a like and subscribe to support me. Thank you.

Ref

• https://tuan200tokyo.blogspot.com/2022/11/blog46-5-cach-e-tranh-re-render.html