Скачать или смотреть How to Avoid Rerendering of a Component in React?

Discover effective strategies to prevent rerendering of components in your React applications, ensuring optimal performance and a smoother user experience.
---
This video is based on the question https://stackoverflow.com/q/63575856/ asked by the user 'rgdzv' ( https://stackoverflow.com/u/13115642/ ) and on the answer https://stackoverflow.com/a/63576028/ provided by the user 'HMR' ( https://stackoverflow.com/u/1641941/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to avoid rerender of a component in React?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Avoid Rerendering of a Component in React?

In the world of React, maintaining optimal performance is key. As applications grow complex, one common issue developers face is component rerendering. This guide will guide you through the problem and how to prevent unwanted rerendering in your React components, ensuring a more efficient application.

The Problem: Unwanted Rerendering

When using React, you might start noticing that some of your components are rerendering more often than necessary. This can happen for a variety of reasons but is commonly caused by:

Changing Props: A component rerenders whenever its props change. This includes anonymous functions passed as props, which are recreated every time the parent component renders.

State Changes: If the state of a parent component changes, all child components will also rerender.

For instance, in an application where you load photos from a server and display them in a list, you might use a modal to show larger versions of these photos. Every time you open or close the modal, the list might rerender, leading to a suboptimal performance.

Let’s dive into how to tackle the unwanted rerendering of components in our application.

The Solution: Utilizing React.memo and useCallback

To effectively prevent rerendering, we can make use of React.memo for functional components and useCallback for memoizing functions. These tools give React the information it needs to decide whether or not a component should rerender based on changes in props.

Step 1: Create a Container Component for the List

Rather than passing a new function to the List component each time, we can create a ListContainer that wraps around the List component, ensuring that the onClick handler does not change unnecessarily.

[[See Video to Reveal this Text or Code Snippet]]

This ensures that the ListContainer only rerenders when its props change.

Step 2: Memoize the getBigPhoto Function

Next, we use useCallback to ensure that the getBigPhoto function is not recreated on every render. This helps retain the same reference for the function, thus preventing unnecessary rerenders.

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Rendering the List Component

Finally, replace the direct rendering of the List component with the newly created ListContainer. This component will now receive the memoized getBigPhoto function.

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By implementing React.memo and useCallback, you can significantly reduce unnecessary rerenders in your React components. This leads to improved performance and a smoother experience for users interacting with your application.

Remember: optimizing component rendering is essential for building scalable and efficient applications. Experiment with these techniques to find the best combination for your project needs.

Now you can enjoy a more efficient React app, where components only rerender when absolutely necessary!