React.js : How to stop re-rending child component when parent state is changed React

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