How do you memoize a component?
There are memoize libraries available which can be used on function components.
For example moize
library can memoize the component in another component.
import moize from 'moize';import Component from './components/Component'; // this module exports a non-memoized componentconst MemoizedFoo = moize.react(Component);const Consumer = () => {<div>{'I will memoize the following entry:'}<MemoizedFoo /></div>;};
Update: Since React v16.6.0, we have a React.memo
. It provides a higher order component which memoizes component unless the props change. To use it, simply wrap the component using React.memo before you use it.
const MemoComponent = React.memo(function MemoComponent(props) {/* render using props */});OR;export default React.memo(MyFunctionComponent);
January 23, 2022
625
Read more
What is React?
November 06, 2022
ReactJSHow to programmatically trigger click event in React?
November 06, 2022
ReactJS