Zrozumiec hooki
`import React, { useState } from ‘react’;
function Przyklad() {
const [count, setCount] = useState(0);
return (
Licznik: {count}
setCount(count + 1)}>Zwiększ
);
}
`
-
Co tu się dzieje?
Używamy tylko useState, żeby:
przechować wartość (count), zmieniać ją przy kliknięciu (setCount(count + 1)).Gdy klikniesz przycisk, liczba rośnie i React odświeża ekran.
💡Nie dzieje się nic więcej w tle.
`import React, { useState, useEffect } from ‘react’;
function Przywitanie() {
const [klik, ustawKlik] = useState(0);
useEffect(() => {
console.log(“Kliknięto przycisk! Liczba kliknięć:”, klik);
}, [klik]);
return (
Kliknięcia: {klik}
ustawKlik(klik + 1)}>Kliknij mnie!
);
}
Nadal masz **useState**, jak wcześniej — do przechowywania wartości.
Ale dodajesz useEffect, który mówi:
👉 „Za każdym razem, gdy zmieni się klik, zrób coś (w tym przypadku: loguj do konsoli).”
🧠 Czyli useEffect to taka “reakcja na zmianę”.`
Różnica w skrócie
Cechy Przyklad (useState) Przywitanie (useState + useEffect)
Przechowuje dane ✅ ✅
Zmienia dane po kliknięciu ✅ ✅
Reaguje na zmianę (efekt uboczny) ❌ ✅ – loguje coś do konsoli
Importuje useEffect ❌ ✅
Zastosowanie Prosty licznik Licznik + dodatkowa logika przy zmianie
📦 Prosta metafora
Wyobraź sobie, że masz licznik:
W pierwszym przykładzie: licznik się tylko zmienia na ekranie.
W drugim: licznik się zmienia + ktoś za każdym razem coś o tym zapisuje w zeszycie (czyli console.log).
