useMemo

const cachedValue = useMemo(calculateValue, dependencies)

• Referensi
  • useMemo(calculateValue, dependencies)
• Penggunaan
  • Melewati perhitungan ulang yang mahal
  • Melewati rendering ulang pada komponen
  • Memoizing a dependency of another Hook
  • Memoizing a function
• Troubleshooting
  • My calculation runs twice on every re-render
  • My useMemo call is supposed to return an object, but returns undefined
  • Every time my component renders, the calculation in useMemo re-runs
  • I need to call useMemo for each list item in a loop, but it’s not allowed

Referensi

useMemo(calculateValue, dependencies)

Panggil useMemo di tingkat atas komponen Anda untuk meng-cache hasil perhitungan pada tiap *render.

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

Lihat contoh lainnya di bawah ini.

Parameters

• calculateValue: Fungsi untuk menghitung nilai yang ingin Anda cache. Nilai harus murni, tidak mempunyai argumen, dan harus membalikkan nilai dari tipe data apapun. React akan memanggil fungsi tersebut pada render awal. Pada render selanjutnya, React akan mengembalikan nilai yang sama jika dependencies tidak berubah dari render terakhir. Sebaliknya, React akan memanggil calculateValue, mengembalikan hasil nilainya, dan disimpan sehingga nilai tersebut dapat digunakan kembali nantinya.

• dependencies: Daftar dari semua nilai reaktif yang direferensikan dalam kode calculatedValue. Nilai reaktif termasuk props, state, serta seluruh variabel dan fungsi yang dideklarasi langsung dalam badan komponen. Jika linter Anda sudah dikonfigurasi untuk React, maka linter akan memeriksa setiap nilai reaktif sudah dispesifikasikan sebagai sebuah dependency dengan benar. Daftar dependency harus memiliki jumlah item yang tetap dan dituliskan dalam sebaris seperti [dep1, dep2, dep3]. React akan membandingkan tiap dependency dengan nilai sebelumnya menggunakan perbandingan Object.is.

Kembalian

Pada render pertama kali, useMemo mengembalikan hasil pemanggilan calculateValue tanpa argumen.

Saat render selanjutnya, akan mengembalikan nilai yang telah disimpan dari render selanjutnya (apabila dependency belum berubah), atau kembali memanggil calculateValue, dan mengembalikan hasil yang dikembalikan oleh calculateValue.

Catatan Penting

• useMemo merupakan Hook, jadi Anda hanya dapat memanggilnya di tingkat atas komponen Anda atau pada Hook Anda sendiri. Anda tidak bisa memanggilnya di dalam perulangan atau suatu kondisi. Jika Anda memerlukannya, ekstrak komponen baru dan pindahkan state tersebut ke dalamnya.
• Pada Strict Mode, React akan memanggil fungsi perhitungan Anda dua kali untuk membantu Anda menemukan ketidakmurnian (impurity) yang tidak disengaja. Perlakuan ini hanya terjadi pada development dan tidak memengaruhi production. Jika fungsi perhitungan Anda murni (sebagaimana mestinya), maka seharusnya tidak memengaruhi logika Anda. Hasil dari salah satu pemanggilan akan diabaikan.
• React tidak akan membuang nilai cache kecuali ada alasan spesifik untuk melakukannya. Sebagai contoh, pada development, React membuang cache ketika Anda menyunting file komponen Anda. Baik dalam development dan production, React akan membuang cache jika komponen Anda menunda saat mount awal. Kedepannya, React mungkin akan menambahkan fitur yang memanfaatkan pembuangan cache—misalnya, jika React menambahkan dukungan bawaan untuk daftar virtual di masa depan, maka akan masuk akal untuk membuang cache untuk item yang keluar dari tampilan tabel virtual. Hal ini seharusnya tidak masalah jika Anda hanya mengandalkan useMemo sebagai optimasi kinerja semata. Jika tidak, variabel status atau sebuah ref mungkin lebih tepat.

Penggunaan

Melewati perhitungan ulang yang mahal

Untuk meng-cache perhitungan di antara render ulang, kemas dalam panggilan useMemo di tingkat atas komponen Anda:

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

Anda perlu memberikan dua hal untuk useMemo:

1. Sebuah fungsi perhitungan tanpa argumen, seperti () => dan mengembalikan apa yang ingin Anda hitung.
2. Sebuah daftar dependency termasuk setiap nilai pada komponen Anda yang digunakan dalam perhitngan Anda.

Pada render awal, nilai yang akan Anda dapatkan dari useMemo akan menjadi hasil dari pemanggilan perhitungan Anda.

Pada setiap render berikutnya, React akan membandingkan dependency dengan dependency yang Anda berikan pada render sebelumnya. Jika dependency tersebut tidak berubah, (bandingkan dengan Object.is), useMemo akan mengembalikan nilai yang telah Anda hitung sebelumnya. Sebaliknya, React akan menjalankan ulang perhitungan Anda dan mengembalikan nilai baru.

Dengan kata lain, useMemo meng-cache hasil perhitungan antara render ulang hingga dependency-nya berubah.

Mari telusuri contoh untuk melihat kapan ini berguna.

Secara bawaan, React akan menjalankan ulang seluruh badan kompoenn Anda setiap render ulang. Sebagai contoh, jika TodoList memperbarui state-nya atau mendapatkan props baru dari parent-nya, fungsi filterTodos akan dijalankan kembali:

function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab);
  // ...
}

Biasanya, hal ini tidak menjadi masalah karena kebanyakan perhitungan dilakukan dengan sangat cepat. Namun, jika Anda melakukan penyaringan atau mengubah senarai (array) yang besar, atau melakukan komputasi yang mahal, Anda mungkin ingin melewatkan melakukannya lagi jika data tidak berubah. Jika todos dan tab sama seperti render terakhir, mengemas perhitungan tersebut dalam useMemo seperti sebelumnya memungkinkan Anda menggunakan kembali visibleTodos yang telah Anda hitung sebelumnya.

Tipe caching ini disebut dengan memoisasi.

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');

console.time('filter array');
const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab); // Dilewatkan jika todos dan tab tidak berubah
}, [todos, tab]);
console.timeEnd('filter array');

Melewati rendering ulang pada komponen

Dalam beberapa kasus, useMemo juga dapat membantu Anda mengoptimalkan kinerja komponen child dalam rendering ulang. Untuk menggambarkan ini, anggap komponen TodoList memberikan visibleTodos sebagai prop kepada komponen child List:

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  );
}

Anda telah memerhatikan bahwa mengubah prop theme membekukan aplikasi sesaat, tetapi jika Anda menghapus <List /> dari JSX anda, rasanya jadi cepat. Hal ini memberitahu Anda bahwa ada baiknya untuk mencoba mengoptimalkan komponen List.

Secara bawaan, ketika komponen merender ulang, React akan merender semua children-nya secara berulang Inilah sebabnya, ketika TodoList merender ulang dengan theme yang berbeda, komponen List juga merender ulang. Hal ini bagus untuk komponen yang tidak memerlukan banyak perhitungan untuk render ulang. Namun jika anda telah memeriksa bahwa render ulang berjalan lambat, Anda dapat memberi tahu List untuk melewatkan rendering ulang jika props-nya sama seperti render sebelumnya dengan membungkusnya dalam memo:

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

Dengan perubahan ini, List akan melewati rendering ulang jika seluruh props-nya sama dengan render terakhir. Disinilah meng-cache perhitungan menjadi penting! Bayangkan Anda menghitung visibleTodos tanpa useMemo:

export default function TodoList({ todos, tab, theme }) {
  // Setiap tema berganti, ini akan menjadi senarai (array) yang berbeda...
  const visibleTodos = filterTodos(todos, tab);
  return (
    <div className={theme}>
      {/* ... prop dari List tidak akan sama, dan akan melakukan render ulang tiap saat */}
      <List items={visibleTodos} />
    </div>
  );
}

Pada contoh di atas, fungsi filterTodos selalu membuat senarai (array) yang berbeda, mirip dengan objek literal {} selalu membuat objek baru. Biasanya, hal ini tidak menjadi masalah, tapi ini berarti bahwa prop dari List tidak akan sama, dan optimalisasi memo tidak akan berjalan. Di sinilah useMemo berguna:

export default function TodoList({ todos, tab, theme }) {
  // Memberitahu React untuk meng-cache perhitungan Anda di antara render ulang...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...selama dependency ini tidak berubah...
  );
  return (
    <div className={theme}>
      {/* ...List akan menerima prop yang sama dan dapat melewati rendering ulang */}
      <List items={visibleTodos} />
    </div>
  );
}

Dengan membungkus perhitungan visibleTodos pada useMemo, Anda pastikan bahwa itu mempunyai nilai yang sama di antara render ulang (sampai dependency berubah). Kamu tidak perlu untuk membungkus perhitungan dalam useMemo kecuali Anda melakukan itu untuk alasan yang spesifik. Pada contoh ini, alasannya adalah Anda memberikannya ke komponen yang dibungkus dengan memo, dan ini memungkinkannya melewatkan rendering ulang. Terdapat alasan-alasan lain untuk menambahkan useMemo yang dijelaskan lebih lanjut pada halaman ini.

export default function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  const children = useMemo(() => <List items={visibleTodos} />, [visibleTodos]);
  return (
    <div className={theme}>
      {children}
    </div>
  );
}

Memoizing a dependency of another Hook

Suppose you have a calculation that depends on an object created directly in the component body:

function Dropdown({ allItems, text }) {
  const searchOptions = { matchMode: 'whole-word', text };

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // 🚩 Caution: Dependency on an object created in the component body
  // ...

Depending on an object like this defeats the point of memoization. When a component re-renders, all of the code directly inside the component body runs again. The lines of code creating the searchOptions object will also run on every re-render. Since searchOptions is a dependency of your useMemo call, and it’s different every time, React knows the dependencies are different, and recalculate searchItems every time.

To fix this, you could memoize the searchOptions object itself before passing it as a dependency:

function Dropdown({ allItems, text }) {
  const searchOptions = useMemo(() => {
    return { matchMode: 'whole-word', text };
  }, [text]); // ✅ Only changes when text changes

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // ✅ Only changes when allItems or searchOptions changes
  // ...

In the example above, if the text did not change, the searchOptions object also won’t change. However, an even better fix is to move the searchOptions object declaration inside of the useMemo calculation function:

function Dropdown({ allItems, text }) {
  const visibleItems = useMemo(() => {
    const searchOptions = { matchMode: 'whole-word', text };
    return searchItems(allItems, searchOptions);
  }, [allItems, text]); // ✅ Only changes when allItems or text changes
  // ...

Now your calculation depends on text directly (which is a string and can’t “accidentally” become different).

Memoizing a function

Suppose the Form component is wrapped in memo. You want to pass a function to it as a prop:

export default function ProductPage({ productId, referrer }) {
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }

  return <Form onSubmit={handleSubmit} />;
}

Just as {} creates a different object, function declarations like function() {} and expressions like () => {} produce a different function on every re-render. By itself, creating a new function is not a problem. This is not something to avoid! However, if the Form component is memoized, presumably you want to skip re-rendering it when no props have changed. A prop that is always different would defeat the point of memoization.

To memoize a function with useMemo, your calculation function would have to return another function:

export default function Page({ productId, referrer }) {
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails
      });
    };
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

This looks clunky! Memoizing functions is common enough that React has a built-in Hook specifically for that. Wrap your functions into useCallback instead of useMemo to avoid having to write an extra nested function:

export default function Page({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

The two examples above are completely equivalent. The only benefit to useCallback is that it lets you avoid writing an extra nested function inside. It doesn’t do anything else. Read more about useCallback.

Troubleshooting

My calculation runs twice on every re-render

In Strict Mode, React will call some of your functions twice instead of once:

function TodoList({ todos, tab }) {
  // This component function will run twice for every render.

  const visibleTodos = useMemo(() => {
    // This calculation will run twice if any of the dependencies change.
    return filterTodos(todos, tab);
  }, [todos, tab]);

  // ...

This is expected and shouldn’t break your code.

This development-only behavior helps you keep components pure. React uses the result of one of the calls, and ignores the result of the other call. As long as your component and calculation functions are pure, this shouldn’t affect your logic. However, if they are accidentally impure, this helps you notice and fix the mistake.

For example, this impure calculation function mutates an array you received as a prop:

  const visibleTodos = useMemo(() => {
    // 🚩 Mistake: mutating a prop
    todos.push({ id: 'last', text: 'Go for a walk!' });
    const filtered = filterTodos(todos, tab);
    return filtered;
  }, [todos, tab]);

React calls your function twice, so you’d notice the todo is added twice. Your calculation shouldn’t change any existing objects, but it’s okay to change any new objects you created during the calculation. For example, if the filterTodos function always returns a different array, you can mutate that array instead:

  const visibleTodos = useMemo(() => {
    const filtered = filterTodos(todos, tab);
    // ✅ Correct: mutating an object you created during the calculation
    filtered.push({ id: 'last', text: 'Go for a walk!' });
    return filtered;
  }, [todos, tab]);

Read keeping components pure to learn more about purity.

Also, check out the guides on updating objects and updating arrays without mutation.

My useMemo call is supposed to return an object, but returns undefined

This code doesn’t work:

  // 🔴 You can't return an object from an arrow function with () => {
  const searchOptions = useMemo(() => {
    matchMode: 'whole-word',
    text: text
  }, [text]);

In JavaScript, () => { starts the arrow function body, so the { brace is not a part of your object. This is why it doesn’t return an object, and leads to mistakes. You could fix it by adding parentheses like ({ and }):

  // This works, but is easy for someone to break again
  const searchOptions = useMemo(() => ({
    matchMode: 'whole-word',
    text: text
  }), [text]);

However, this is still confusing and too easy for someone to break by removing the parentheses.

To avoid this mistake, write a return statement explicitly:

  // ✅ This works and is explicit
  const searchOptions = useMemo(() => {
    return {
      matchMode: 'whole-word',
      text: text
    };
  }, [text]);

Every time my component renders, the calculation in useMemo re-runs

Make sure you’ve specified the dependency array as a second argument!

If you forget the dependency array, useMemo will re-run the calculation every time:

function TodoList({ todos, tab }) {
  // 🔴 Recalculates every time: no dependency array
  const visibleTodos = useMemo(() => filterTodos(todos, tab));
  // ...

This is the corrected version passing the dependency array as a second argument:

function TodoList({ todos, tab }) {
  // ✅ Does not recalculate unnecessarily
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...

If this doesn’t help, then the problem is that at least one of your dependencies is different from the previous render. You can debug this problem by manually logging your dependencies to the console:

  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  console.log([todos, tab]);

You can then right-click on the arrays from different re-renders in the console and select “Store as a global variable” for both of them. Assuming the first one got saved as temp1 and the second one got saved as temp2, you can then use the browser console to check whether each dependency in both arrays is the same:

Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...

When you find which dependency breaks memoization, either find a way to remove it, or memoize it as well.

I need to call useMemo for each list item in a loop, but it’s not allowed

Suppose the Chart component is wrapped in memo. You want to skip re-rendering every Chart in the list when the ReportList component re-renders. However, you can’t call useMemo in a loop:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 You can't call useMemo in a loop like this:
        const data = useMemo(() => calculateReport(item), [item]);
        return (
          <figure key={item.id}>
            <Chart data={data} />
          </figure>
        );
      })}
    </article>
  );
}

Instead, extract a component for each item and memoize data for individual items:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item =>
        <Report key={item.id} item={item} />
      )}
    </article>
  );
}

function Report({ item }) {
  // ✅ Call useMemo at the top level:
  const data = useMemo(() => calculateReport(item), [item]);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
}

Alternatively, you could remove useMemo and instead wrap Report itself in memo. If the item prop does not change, Report will skip re-rendering, so Chart will skip re-rendering too:

function ReportList({ items }) {
  // ...
}

const Report = memo(function Report({ item }) {
  const data = calculateReport(item);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
});