Zrozumieć React

memoZapamiętanie komponentu
Powrót do lekcji

Poniższy komponent renderuje Person, które wykorzystuje getAge, żeby obliczyć wiek danej osoby. W komponencie App dochodzi do zmiany stanu przy każdym kliknięciu +, a co z tym idzie dochodzi do rerendera, więc Personponownie wywołuje getAge.
W poprzedniej lekcji poradziliśmy sobie z tym problem za pomocą useMemo. W tym zadaniu spróbuj zapamiętać cały wyrenderowany komponent, tak żeby nie dochodziło do ponownego rendera Personprzy zmianie stanu komponentu App.

Twój kod 💻

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

const person = {
    name: "Jan",
    yearOfBirth: 1990
};

export default function App() {
    const [count, setCount] = useState(0);
     
    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

memoZapamiętanie komponentuPowró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

memoZapamiętanie komponentu
Powrót do lekcji

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