is a higher-order component provided by React that will return a memoized version of the component that only changes if one of the props has changed. It is the same as but instead of classes is used for functional components. React.memo PureComponent React.memo Why use React.memo? memoizes the rendered output then skips unnecessary rendering. This helps to prevent unnecessary re-rendering of components and computations needed for component rendering. React.memo React.memo in action As an example implementation lets create a component which will: Greet user Show number of times user has greeted Let user greet using button Let’s create and add a function/method on component that does the work of simulating some heavy computations while rendering the component. GreetUser UserGreeting = { getUserName = { i = ; (i < ) i++; ;
  }; ;
}; // userGreeting.js const => () const => () let 0 while 3000000000 return 'John Doe' return Hello {getUserName()}, < > div </ > div and components will show the count and increment greet count on click respectively and do not have any heavy computations. GreetingCount Button GreetingCount = ( ;
); Button = ( ); // greetingCount.js const ( ) => { count } return You greeted me {count} times. < > div </ > div // button.js const ( ) => { title, onClick } {title} < = > button onClick {onClick} </ > button And the parent component will import all these components and have a method to update the greetings count. App = { [greetCount, setGreetCount] = useState( ); onGreet = {
    setGreetCount(greetCount + );
  }; ( <UserGreeting /> <GreetingCount count={greetCount} />
      <Button title='Hi' onClick={onGreet} />
    </div>
  );}; //App.js const => () const 0 const => () 1 return < = > div className 'App' Problem As you can see that there is a delay for certain intervals before the UI updates after the button is clicked. This is because when we click on the button the state changes so every component is rerendered and the component is rerendered as well. The method is executed again due to a re-render of the component thus causing a delay in UI update. GreetUser getUserName GreetUser Solution So the solution for the above problem is to use . The method will memoize the component and does a shallow comparison of the component and since none of the props in component has been changed, it will skip re-rendering of this component. This will prevent the recomputation during the render and the UI updates quickly. For this we will wrap the component with and export it. React.memo() React.memo() GreetUser React.memo() UserGreeting = { React.memo(UserGreeting); const => () // code here}; export default Result: As you can see now that the component does not re-render the component and the UI is updated without any delay. GreetUser You can find the complete example on CodeSandbox This post was first published on DevPostbyTruemark .

Too Long; Didn't Read

Making security fun one episode at a time

A Beginner's Guide to Performance Optimization Using React.memo()

Too Long; Didn't Read

Kiran

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A Beginner's Guide to Performance Optimization Using React.memo()

Too Long; Didn't Read

Kiran

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES