Hooki React – useMemo tutorial

Hook useMemo zwraca zapamiętaną wartość. Dlatego możesz go użyć do optymalizacji wydajności swojej aplikacji. Jeśli potrzebujesz wykonać duże obliczenia, aby uzyskać potrzebną wartość, możesz to zrobić tylko raz i użyć hook-a useMemo, aby zapamiętać otrzymaną wartość.

Gdy przekażesz funkcję do hook-a useMemo, zostanie ona wywołana w pierwszym renderowaniu, a przy każdym kolejnym renderowaniu zwrócona zostanie jej zapamiętana wartość, więc można uniknąć kosztownych obliczeń przy każdym renderowaniu komponentu (chyba że zmianie ulegnie przekazana tablica zależności, wówczas funkcja zostanie wywołana ponownie, aby uzyskać i zapamiętać nową wartość).

Wyobraźmy sobie, że mamy licznik i dwa przyciski, które zmieniają jego wartość. Po kliknięciu dowolnego przycisku wartość licznika zmieni się, a komponent zostanie ponownie wyrenderowany.

Teraz wyobraź sobie, że na tej samej stronie mamy wartość „memo”, która jest sumą dwóch cyfr. Funkcjonalność dodawania cyfr jest objęta funkcją useMemo, więc dodawanie jest wykonywane tylko raz i za każdym razem, gdy klikamy przyciski, które zmieniają licznik, suma dodawania jest zwracana z pamięci.

Poniższy kod ładnie obrazuje ten przykład:

const HookExample = () => {    
    const [counter, setCounter] = useState(0);
    const [numbers, setNumbers] = useState({a: 5, b: 7})

    // if your calculations will be wrapped in useMemo, it will be re-render only if dependencies will change
    // otherwise it will be "read value from memory"
    const memo = useMemo(() => { 
        // here you can add some calculations
        console.log("calculations are made here");
        return numbers.a + numbers.b
    }, [numbers]);

    return (
        <div className="App">
            <p>Counter: {counter}</p>
            <div>
                <button onClick={() => setCounter(counter-1) }>-1</button>
                <button onClick={() => setCounter(counter+1) }>+1</button>
            </div>
            <p>Memo: {numbers.a} + {numbers.b} = {memo}</p>
            <div>
                <button onClick={() => setNumbers({a: numbers.a + 1, b: numbers.b + 2}) }>Change memo numbers</button>
            </div>
        </div>
    );
}

export default HookExample;

Zobacz DEMO i sprawdź, jak działa hook useMemo

Kod do tego postu możesz naleźć tu: https://github.com/love-coding-pl/React-Hooks-Examples/tree/Hook-6-useMemo