Zależności w useEffect w React
Teraz zmieniajmy kolor po kliknięciu
przycisku. Stwórzmy stan color dla koloru,
ustawiając mu początkową wartość:
const [color, setColor] = useState('green');
Zamieńmy wartość tekstową na nasz stan
w useEffect i nie zapomnijmy dodać go
do listy zależności w nawiasach kwadratowych.
Teraz efekt będzie wykonywany za każdym
razem przy zmianie stanu color:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
Dodajmy teraz przycisk do zmiany koloru w naszym komponencie:
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>change</button>
</div>
);
Dodajmy również funkcję obsługi kliknięcia, która będzie zmieniać nasz kolor na pomarańczowy:
function changeColor() {
setColor('orange');
}
Dany jest stan z nazwą użytkownika. Spraw, aby za każdym razem przy zmianie nazwy, wartość stanu zapisywała się w lokalnej pamięci przeglądarki.
