React.memo

Giriş
Açıklaması şöyle.

If you want to avoid the component from re-rendering when it's parent does, you would need to use React.memo. React isn't going to automatically stop rendering the component just because it doesn't have any props.

Örnek
Şöyle yaparız.

function App() {
  const [, setToggle] = React.useState(true);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button type="button" onClick={() => setToggle(x => !x)}>
        Re-render Parent
      </button>
      <br />
      <Gurdingo />
      <br />
      <GurdingoMemo />
    </div>
  );
}

const Gurdingo = () => {
  React.useEffect(() => {
    console.log("Rendering");
  });
  return <>100</>;
};

const GurdingoMemo = React.memo(() => {
  React.useEffect(() => {
    console.log("Rendering Memoized Gurdingo");
  });
  return <>100</>;
});

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);