Untuk mengatasi child component yang di render ulang saat state di dalam parent berubah, maka kita bisa menggunakan React.memo di dalam child component.

Alih-alih melakukan export seperti ini export default ChildComponent, kita bisa menggunakan export default React.memo(ChildComponent).

Contoh lebih jelasnya seperti berikut ini.

Parent Component

import React, { useState } from "react";
import ReactDOM from "react-dom";

//import child component
import ChildComponent from "./ChildComponent";

function App() {
  const [counter, setCounter] = useState(0);

  return (
    <div className="App">
      
      <button onClick={(e) => setCounter(counter+1)}>Click me</button>

      {/* render child component  */}
      <ChildComponent />
  
    </div>
  );
}

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

Child Component

import React from "react";

function ChildComponent(props) {
  return <div className="App">child Page</div>;
}

export default React.memo(ChildComponent);

Terima Kasih