Dany jest komponent funkcyjny biblioteki React. Jaka liczba będzie widoczna na przycisku po jednym kliknięciu, jeśli początkowo wyświetla on 0?
function Licznik() {
const [n, setN] = useState(0);
const klik = () => {
setN(n + 1);
setN(n + 1);
};
return <button onClick={klik}>{n}</button>;
}Dlaczego tak
W chwili kliknięcia zmienna n ma wartość 0 z bieżącego renderowania, więc oba wywołania ustawiają ten sam nowy stan 0 + 1 = 1, a React wykonuje jedno ponowne renderowanie. Wynik 2 dałoby dopiero użycie funkcji aktualizującej: setN(p => p + 1) wywołane dwukrotnie, bo każda dostaje najnowszy stan. Stan zmienia się, więc przycisk nie pokaże już 0.