This content originally appeared on DEV Community and was authored by Ricardo Maia
๐๐ฆ๐ข๐ค๐ต.๐ฎ๐ฆ๐ฎ๐ฐ is a higher-order function (HOC) in React that helps optimize the performance of functional components by preventing unnecessary re-renders. It memorizes the result of the component's rendering and only re-renders it if the ๐ฉ๐ซ๐จ๐ฉ๐ฌ change. This is useful when a component's props or state don't change often.
๐๐จ๐ฐ ๐๐๐๐๐ญ.๐ฆ๐๐ฆ๐จ ๐๐จ๐ซ๐ค๐ฌ
When a functional component is wrapped in ๐๐ฆ๐ข๐ค๐ต.๐ฎ๐ฆ๐ฎ๐ฐ, React performs a shallow comparison between the previous and new props. If the props haven't changed, the component won't re-render, saving performance resources by avoiding redundant rendering.
๐๐๐ฌ๐ข๐ ๐๐ฒ๐ง๐ญ๐๐ฑ
๐๐ข๐ฆ๐ฉ๐ฅ๐ ๐๐ฑ๐๐ฆ๐ฉ๐ฅ๐
Imagine we have a Counter component and a child component that displays a static message. We can use React.memo for the child component to avoid re-rendering it every time the counter state changes, as long as its props remain the same.
๐๐ข๐ญ๐ก๐จ๐ฎ๐ญ ๐๐๐๐๐ญ.๐ฆ๐๐ฆ๐จ:
In this example, every time the counter state changes, ๐๐ต๐ข๐ต๐ช๐ค๐๐ฆ๐ด๐ด๐ข๐จ๐ฆ will re-render, even though its content remains unchanged.
๐๐ข๐ญ๐ก ๐๐๐๐๐ญ.๐ฆ๐๐ฆ๐จ:
Now, with ๐๐ฆ๐ข๐ค๐ต.๐ฎ๐ฆ๐ฎ๐ฐ, the ๐๐ต๐ข๐ต๐ช๐ค๐๐ฆ๐ด๐ด๐ข๐จ๐ฆ component will only render once, unless its props change. Even if the counter updates, the static component will not be re-rendered.
๐๐๐๐๐ญ.๐ฆ๐๐ฆ๐จ ๐ฐ๐ข๐ญ๐ก ๐๐ฎ๐ฌ๐ญ๐จ๐ฆ ๐๐จ๐ฆ๐ฉ๐๐ซ๐ข๐ฌ๐จ๐ง
By default, ๐๐ฆ๐ข๐ค๐ต.๐ฎ๐ฆ๐ฎ๐ฐ performs a shallow comparison of props. However, you can provide a custom comparison function if you need finer control over the re-rendering process.
๐๐ฑ๐๐ฆ๐ฉ๐ฅ๐ ๐ฐ๐ข๐ญ๐ก ๐๐ฎ๐ฌ๐ญ๐จ๐ฆ ๐๐จ๐ฆ๐ฉ๐๐ซ๐ข๐ฌ๐จ๐ง:
In this example, the compareProps function checks whether the value prop has changed. If it hasn't, the component won't re-render, even if other parts of the parent component trigger a re-render.
๐๐จ๐ง๐๐ฅ๐ฎ๐ฌ๐ข๐จ๐ง
๐๐ฆ๐ข๐ค๐ต.๐ฎ๐ฆ๐ฎ๐ฐ is a simple yet effective tool for optimizing functional components, especially in cases where rendering is costly or the props change infrequently. By using ๐๐ฆ๐ข๐ค๐ต.๐ฎ๐ฆ๐ฎ๐ฐ, you can improve application performance by reducing unnecessary re-renders.
This content originally appeared on DEV Community and was authored by Ricardo Maia
Ricardo Maia | Sciencx (2024-10-02T14:25:50+00:00) Optimizing Component Performance in React. Retrieved from https://www.scien.cx/2024/10/02/optimizing-component-performance-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.