Creating Pure Functional Component using React Memo – User friendly Tech help
import React from 'react';nimport Tabs from '../Tabs';nimport './RightPanel.scss';nnnconst RightPanel = () => (n n n n n You are on Index.jsx filen n n You are on Panel.jsx filen n n n n);nnexport default RightPanel;n
n
Sample code where we are using Class component, when though we could have used functional component.
n
class RightPanel extends PureComponent {n render() {n return (n n n n n You are on Index.jsx filen n n You are on Panel.jsx filen n n n n );n }n}nnexport default RightPanel;
n
Option2) Modern approach from React 16.6, using memo API
n
n
React.memo(…) is to functional components whatReact.PureComponent is to class components
n
n
import React, {memo} from 'react'; import Tabs from '../Tabs'; import './RightPanel.scss'; const RightPanel = () => ( You are on Index.jsx file You are on Panel.jsx file ); export default memo(RightPanel);n
n
If you look at the people in your circle and don’t get inspired, you don’t have a circle, you have CAGE…
Was this article helpful?
YesNo