Penggunaan useMemo pada React JS

 Apa itu useMemo?

useMemo digunakan untuk menyimpan hasil perhitungan (memoization) agar tidak dihitung ulang setiap render, kecuali dependensinya berubah.

Berikut contoh kodenya :

import React, { useState, useMemo } from "react";

export default function App() {

  const [count, setCount] = useState(0);

  // Perform an expensive calculation based on the count value

  const computeResult = () => {

    let result = 0;

    for (let i = 1; i <= count; i++) {

      console.log("Nilai i:", i);

      result += i;

    }

    return result;

  };

  // Memoize the result of the expensive calculation

  const memoizedresult = useMemo(() => computeResult(), [count]);

  return (

    <div>

      <h2> Belajar UseMemo </h2>

      <p>Count: {count}</p>

      <p>Hasil Perhitungan: {memoizedresult}</p>

      <button onClick={() => setCount(count + 1)}>Tambah</button>

    </div>

  );

}

- useMemo menyimpan hasil dari computeResult().

- Perhitungan hanya dilakukan ulang jika count berubah.

- Jika tidak berubah, React akan menggunakan hasil sebelumnya.