zrozumiecReact.pl

Poniższy komponent wywołuje getNumberOfCountries żeby pobrać liczbę krajów na świecie i przekazać ją na widok. Na potrzeby tego ćwiczenia wyobraźmy sobie, że wywołanie getNumberOfCountriesjest bardzo kosztowną operacją.
Komponent zawiera również prosty licznik. Każde kliknięcie w +powoduje rerender, a co za tym idzie ponowne wywołanie funkcji komponentu. Ilość krajów obliczamy tylko raz, dlatego objęliśmy wywołanie w useMemo, żeby zachować wartość w pamięci.
Niestety, w konsoli widzimy, że funkcja i tak wywołuje się przy każdym renderze. Czy widzisz gdzie leży problem?

import { useState, useMemo } from "react";
import { getNumberOfCountries } from "./getNumberOfCountries";

export default function App() {
    const [count, setCount] = useState(0);
    const numberOfCountries = useMemo(() => getNumberOfCountries());
     
    return <>
        <h1>Podróże małe i duże:</h1>
        <h2>Ilość krajów na świecie: {numberOfCountries}</h2>
        <h2>Ilość podróży dookoła świata: {count}</h2>
        <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
}