Ako udržiavať a meniť stav aplikácie vďaka React Hookom

React je jedným z najpopulárnejších JavaScript frameworkov, ktorý výrazne zjednodušuje vytváranie moderných webových aplikácií. S rastom aplikácie je správa stavu kľúčová. Na tento účel React poskytuje niekoľko nástrojov, z ktorých najznámejšie sú useState a useEffect. V tomto článku sa pozrieme na to, ako správne používať tieto funkcie, ako aj na vytváranie vlastných Hookov, ktoré zjednodušia vašu aplikáciu.

1. Základná syntax a použitie `useState` – vytváranie reaktívnych premenných

useState je základným React Hookom, ktorý umožňuje uchovávať a meniť stav v rámci funkčných komponentov. Tento Hook vracia pole, ktoré obsahuje aktuálny stav a funkciu na jeho zmenu.

const [counter, setCounter] = useState(0);

V tomto prípade counter je aktuálna hodnota stavu a setCounter je funkcia na jeho aktualizáciu.

2. `useEffect` na sledovanie zmien a vykonávanie vedľajších efektov

useEffect umožňuje spúšťať kód, ktorý závisí od zmeny stavu alebo vlastností (props). Môžete ho použiť na vykonávanie vedľajších efektov, ako je napríklad načítanie dát z API, manipulácia s DOM alebo nastavenie časovača.

useEffect(() => {
    document.title = `Klikli ste ${counter} krát`;
  }, [counter]);

Tento príklad aktualizuje titulok stránky zakaždým, keď sa hodnota counter zmení.

Online kurz programovania v Jave

Programovanie nie je ťažké! Kódenie vlastných appiek v nástroji Java je veľká zábava. Do konca leta programujete vy sami alebo vaše bystré deti svoje prvé appky

Prvá hodina zadarmo!

7dňová výzva programovania Webu

Budete vedieť vytvárať pekné weby koncom budúceho týždňa? Áno, dá sa to! Radi vám s tým pomôžeme. Stačí prijať Sedemdňovú výzvu a rezervovať si tento kurz

Prvá hodina zadarmo!

3. Vlastné Hooky: Kedy sa oplatí vytvoriť si vlastnú logiku?

V prípade, že máte viacero komponentov s rovnakou logikou, môžete vytvoriť vlastný Hook. Tento Hook vám umožní zdieľať logiku medzi rôznymi komponentmi, čím sa zjednoduší kód a zlepší jeho čitateľnosť.

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

4. Refactoring väčších komponentov – rozdelenie kódu pre lepšiu čitateľnosť

Pri písaní React komponentov sa často stáva, že kód je príliš dlhý a ťažko udržiavateľný. Jedným zo spôsobov, ako sa tomu vyhnúť, je rozdelenie komponentov na menšie časti. React umožňuje jednoducho rozdeliť komponenty do samostatných súborov, čo uľahčuje správu kódu.

5. Časté chyby: nekonečné slučky, nesprávne volanie Hookov, zdieľanie stavu

Pri používaní Hookov môže dôjsť k niekoľkým bežným chybám. Napríklad nesprávne použitie useEffect môže spôsobiť nekonečné slučky, ak sa nešpecifikuje správny zoznam závislostí. Je dôležité venovať pozornosť tomu, ako a kedy sa aktualizujú stavy a ako sa používa useEffect.

Záver

Správa stavu v Reacte je kľúčová pre vytváranie dynamických a interaktívnych aplikácií. Pomocou useState, useEffect a vlastných Hookov môžete efektívne spravovať stav aplikácie a zjednodušiť svoju prácu. Ak chcete získať viac praktických zručností, odporúčame vám náš kurz REACT – Praktický úvod do Reactu bez predchádzajúcich znalostí, kde sa naučíte, ako aplikovať tieto techniky v praxi a vytvárať interaktívne aplikácie v Reacte.

Kurz UML - Základy jazyka UML v nástroji Enterprise Architect