React: Do czego służy useMemo?

Czym jest useMemo?

useMemo to hook, który pozwala na zapamiętanie stanu danych. Dzięki temu aplikacja nie musi przetwarzać danych na nowo, kiedy komponent zostanie ponownie renderowany.

Ma podobną składnię jak: useEffect czy useCallback.

import React, { useMemo } from 'react';

const memoData = useMemo(() => {
...
}, []);

Przykład użycia useMemo

Dobrym przypadkiem użycia useMemo jest, gdy operujesz na dużym zbiorze danych i chcesz uniknąć obliczania tych samych danych na nowo przy ponownym renderowaniu:

function MyComponent({ data }) {
	const total = useMemo(() => data.reduce((total, current) => total + current, [data]);
	
	return (
		<>
			Total: <strong>{total}</strong>
		</>
	)
}

data to w tym przypadku tablica liczb. Nie wiem, jak może być duża, dla tego warto użyć tutaj useMemo.