Bereaksi useMemoKait


React useMemoHook mengembalikan nilai memo.

Pikirkan memoisasi sebagai caching nilai sehingga tidak perlu dihitung ulang.

Hook useMemohanya berjalan ketika salah satu dependensinya diperbarui.

Hal ini dapat meningkatkan kinerja.

The useMemodan useCallbackHooks serupa. Perbedaan utama adalah useMemomengembalikan nilai memo dan useCallbackmengembalikan fungsi memo. Anda dapat mempelajari lebih lanjut useCallbackdi bab useCallback .


Pertunjukan

useMemoHook dapat digunakan untuk menjaga fungsi yang mahal dan intensif sumber daya agar tidak berjalan secara sia-sia .

Dalam contoh ini, kami memiliki fungsi mahal yang berjalan di setiap render.

Saat mengubah hitungan atau menambahkan todo, Anda akan melihat penundaan dalam eksekusi.

Contoh:

Fungsi berkinerja buruk. Fungsi ini expensiveCalculationberjalan pada setiap render:

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

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = expensiveCalculation(count);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

ReactDOM.render(<App />, document.getElementById('root'));


w3schools CERTIFIED . 2022

Dapatkan Sertifikasi!

Selesaikan modul React, kerjakan latihannya, ikuti ujiannya, dan dapatkan sertifikasi w3schools!!

$95 DAFTAR

Menggunakan useMemo

Untuk memperbaiki masalah kinerja ini, kita dapat menggunakan useMemoHook untuk memoize expensiveCalculationfungsi. Ini akan menyebabkan fungsi hanya berjalan saat dibutuhkan.

Kita dapat membungkus panggilan fungsi yang mahal dengan useMemo.

Hook useMemomenerima parameter kedua untuk mendeklarasikan dependensi. Fungsi mahal hanya akan berjalan ketika ketergantungannya telah berubah.

Dalam contoh berikut, fungsi mahal hanya akan berjalan ketika count diubah dan tidak ketika todo ditambahkan.

Contoh:

Contoh kinerja menggunakan useMemoHook:

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

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

ReactDOM.render(<App />, document.getElementById('root'));