How to create Pure Component in React?
A functional component that we are modifying as Pure component:-
import React from 'react'; import Tabs from '../Tabs'; import './RightPanel.scss'; const RightPanel = () => ( <div className="rightPanelCta"> <div className="tab"> <Tabs> <div header="Index.jsx"> You are on Index.jsx file </div> <div header="Panel.jsx"> You are on Panel.jsx file </div> </Tabs> </div> </div> ); export default RightPanel;
Option1) This is the traditional approach(Using PureComponent) where you have to create a “Stateful” component even though you need a “stateless” component.
Sample code where we are using Class component, when though we could have used functional component.
class RightPanel extends PureComponent { render() { return ( <div className="rightPanelCta"> <div className="tab"> <Tabs> <div header="Index.jsx"> You are on Index.jsx file </div> <div header="Panel.jsx"> You are on Panel.jsx file </div> </Tabs> </div> </div> ); } } export default RightPanel;
Option2) Modern approach from React 16.6, using memo API
React.memo(…) is to functional components whatReact.PureComponent is to class components
import React, {memo} from 'react'; import Tabs from '../Tabs'; import './RightPanel.scss'; const RightPanel = () => ( <div className="rightPanelCta"> <div className="tab"> <Tabs> <div header="Index.jsx"> You are on Index.jsx file </div> <div header="Panel.jsx"> You are on Panel.jsx file </div> </Tabs> </div> </div> ); export default memo(RightPanel);
If you look at the people in your circle and don’t get inspired, you don’t have a circle, you have CAGE…