• Szerző: Sallai András
• Copyright © Sallai András, 2021
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

A horgok React 16.8 verzióban jelentek meg.

A useState egy horog, amit függvény egy függvénybe írva állapotokat tárolhatunk, amíg a képernyő újrarendelődik.

A useState egy párt ad vissza. Az egyik része az állapot, a másik egy függvény amivel beállíthatjuk az állapotot.

A függvényt meghívhatjuk bárhol. A függvénynek van egy bemenő paramétere, amely meghatározza a kezdeti értéket.

function valami() {
    const [name, setName] = useState('Névtelen');
    const [city, setCity] = useState('ismeretlen');
    const [salary, setSalary] = useState(2350000);
    const [degree, setDegree] = useState([]);
}

Horgokat nem használhatunk osztálykomponensekben, éppen a React használatát teszik lehetővé osztály nélkül.

Mellékhatások elvégzésére kitalált függvény.

Célja a felület megjelenítését elválasztani a mellékhatással járó tevékenységekkel. A felület megjelenítése és frissítése folyamatosan történik. A mellékhatásnál ezt nem szeretnénk.

Például adatlehívás, feliratkozás, DOM változtatása React komponensből.

  useEffect(() => {
    fetch(dataURL)
    .then((response) => response.json())
    .then((data) => {
      setData(data.friends);
      setTitle(data.title);
      setDesc(data.desc);
    })
    .catch((error) => alert(error))
    .finally(()=>setLoading(false));
  }); 

Ha a letöltött adat egy tömb:

  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(dataURL)
    .then((response) => response.json())
    .then((data) => {
      setData(data);
    })
    .catch((error) => alert(error))
    .finally(()=>setLoading(false));
  }, []); 

Horgokat nem hívhatunk csak a legfelsőbb szinten. A horgokat csak React függvényekből hívjuk.