Reach promises developers better performance and is designed to facilitate web developers with the tools to build faster web applications. However, its built-in performance optimizer doesn’t optimize an application in the best possible way, and often, it falls on us to optimize web applications for better performance.
Table of Contents
As it goes, among the most common and reliable ways to do so is using React Memo, which helps you minimize re-render count and boost the application load time considerably.
At its core, the command uses a caching technique called memoization that stores results or outputs of expensive functions to avoid recalls and needless re-renders.
With every prop or state value change, the components in react re-render. Even though it seems benign, this often needless habit dulls the performance of react applications, as even when the update is solely for the parent component, all its child components also get re-rendered needlessly.
To counter this, a higher-order component, React Memo, works best, whose function is to wrap around a component and memoizes the results to skip needless re-rendering.
Now, there are two ways to use React.memo(). You can either directly wrap the parent component or create a new variable that stores the memoized one and then exports it.
Let’s see the syntax behind the two methods:
const myComponent = React.memo((props) => { /* render using props */ }); export default myComponent;
const myComponent = (props) => { /* render using props */ }; export const MemoizedComponent = React.memo(myComponent);
Memoization works like a charm and helps reduce the re-render count, but that doesn’t mean you can go on an memoization spree and memoize everything.
It is a must to know when and which component to memoize else the fix becomes a burden. As we know, React Memo avoids needless re-renders when the state or context remains unchanged. Thus, memoizing a component whose state or context is constantly changing will have no impact as re-render is justifiable, and React Memo won’t curb it.
Similarly, there are a few more pointers to help you understand when it is justifiable to use React Memo:
1) When the component renders often and needlessly.
2) When it renders with unchanged props, like a child getting auto-rendered.
3) If your component is purely functional, or else use React.PureComponent.
4) If your component is loaded with UI elements and needs an equality check.
So, now you know what React Memo is and when to use it. To recap, use the feature when the component needlessly renders with the same props.
With that, let’s share how to use the feature. For simplicity, we have broken it down into three simple steps:
import React from 'react';
const MyComponent = React.memo((props) => { // Component logic here });
export default MyComponent;
import React from 'react'; const MyComponent = React.memo((props) => { // Component logic here return <div>{props.data}</div>; }); export default MyComponent;
In the example above, a functional component ‘MyComponent’ receives a ‘data’ prop. Wrapping it with React Memo memoizes its output and ensures it only renders when the ‘data’ prop is modified.
In addition, React Memo component is also customizable. Customizing a React component requires defining the criteria on which it gets rendered. Let’s see how to do it with an example.
import React from 'react'; const MyComponent = React.memo((props) => { // Component logic here return <div>{props.data}</div>; }, (prevProps, nextProps) => { // Custom comparison logic // Return true if the component should re-render, false otherwise }); export default MyComponent;
In the example above, a custom comparison is passed as the second argument, which processes the previous and the next props and returns true to trigger a re-render and skips the re-render at false. Customizing the logic behind memoization gives us more flexibility and control and helps us ensure no needful re-renders get skipped and while all needless do.
React Memo is a top tool to optimize React web applications for performance and helps significantly curtail the load time by ensuring the application doesn’t re-render needlessly. It gives developers more control over their applications and the expensive rendering process.
Also Read: Understanding React SetState: Why And How To Use It?
Create a free profile and find your next great opportunity.
Sign up and find a perfect match for your team.
Xperti vets skilled professionals with its unique talent-matching process.
Connect and engage with technology enthusiasts.
© Xperti.io All Rights Reserved
Privacy
Terms of use