Zrozumieć React

Powrót do lekcji

W komponencie Personwywołujemy getAge, żeby obliczyć wiek danej osoby na podstawie przekazanego propsa.
Obejmujemy wynik w useMemo, po to żeby zapamiętać "ciężkie" obliczenia pomiędzy renderami. Niestety, kiedy klikniemy w +i zaktualizujemy zmienną stanowącountwywołamy rerender i ponownie wywołamy funkcję getAge - widzimy to w konsoli.
Dlaczego wykonujemy funkcję jeszcze raz, zamiast pobrać wartość zapisaną w pamięci?

Twój kod 💻

import { useState } from "react";
import { Person } from "./Person";

export default function App() {
    const [count, setCount] = useState(0);
    const person = {
        name: "Jan",
        yearOfBirth: 1990
    };
     
    return <>
        <h1>Dane osobowe:</h1>
        <Person person={person} />
        <hr />
        <h2>Stan licznika: {count}</h2>
        <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
        <h3>(Kliknij, żeby wywołać render)</h3>
    </>
}

Open Sandbox

Dla własnej wygody skorzystaj z platformy z zadaniamy w trybie desktopowym 🙏
Jeżeli potrzebujesz dostępu do zadań w wersji mobile skontaktuj się z nami na kontakt@jakzaczacprogramowac.pl

Powrót do lekcji

Twój kod 💻

Dla własnej wygody skorzystaj z platformy z zadaniamy w trybie desktopowym 🙏Jeżeli potrzebujesz dostępu do zadań w wersji mobile skontaktuj się z nami na kontakt@jakzaczacprogramowac.pl

Dla własnej wygody skorzystaj z platformy z zadaniamy w trybie desktopowym 🙏
Jeżeli potrzebujesz dostępu do zadań w wersji mobile skontaktuj się z nami na kontakt@jakzaczacprogramowac.pl