React.memo
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 asPureComponent
but instead of classesReact.memo
is used for functional components.
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.
As an example implementation lets create a component which will:
Let’s create and add a function/method on
GreetUser
component that does the work of simulating some heavy computations while rendering the component.
// userGreeting.js
const UserGreeting = () => {
const getUserName = () => {
let i = 0;
while (i < 3000000000) i++;
return 'John Doe';
};
return <div>Hello {getUserName()},</div>;
};
#react #reactjs #javascript #coding #react-native