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

Similar Posts