How to use React.PureComponent in a Functional Component In ReactJS
- This converts a functional component to memoized component by use of React.memo(). This then optimizes rendering by preventing un-necessary re-renders of components whose props remain unchanged.
import React from 'react';
const MyComponent = ({ data }) => {
return <div>{data}</div>;
};
export default React.memo(MyComponent);
Explain the scenario where using a PureComponent is advantageous.
React PureComponent is a supercharged component that automatically checks for an update before rendering. It is ideal for components that heavily rely on props and state. It achieves this by comparing incoming facts with what it already holds, avoiding unnecessary renderings and thus saving considerable processing power. It makes your app faster especially when you have so many components to display or frequent updates.
PureComponent is like an in-built tool for optimization that helps to keep your application running well without much additional work.
We will discuss about the approach for creating pure components:
Table of Content
- 1. Class Component Approach:
- 2. Functional Component with React.memo():
- 3. Using React.PureComponent in a Functional Component: