Use React.memo easy way

Photo by Qijin Xu on Unsplash

React.memo: memo lets you skip re-rendering a component when its props are unchanged.

Wrap a component in memo to get a memoized version of that component. This memoized component will not be rendered while the parent component of it’s re-render as long as its props have not changed. But react may still render it: memoization is a performance optimization, but not guarantee.

By using React.memo, React app only renders when the props change.

🤞✨ child component

import React, { memo } from "react";

function Child({ name }) {
  return (
    <div>
      <h1>Child Component</h1>
      <div>{name}</div>
    </div>
  );
}

export default memo(Child);

🤞✨ parent component

import Child from "./child";

export default function App() {
  return (
    <div className="App">
      <Child name="apple" />
    </div>
  );
}

🙌 live demo codesandbox .

😊React official docs