Jak udržovat a měnit stav aplikace díky React Hookům

React je jedním z nejpopulárnějších JavaScript frameworků, který výrazně usnadňuje vytváření moderních webových aplikací. S růstem aplikace je správa stavu klíčová. K tomu React poskytuje několik nástrojů, z nichž nejznámější jsou useState a useEffect. V tomto článku se podíváme na to, jak správně používat tyto funkce, a také na vytváření vlastních Hooků, které zjednoduší vaši aplikaci.

1. Základní syntaxe a použití `useState` – vytváření reaktivních proměnných

useState je základní React Hook, který umožňuje uchovávat a měnit stav v rámci funkčních komponent. Tento Hook vrací pole, které obsahuje aktuální stav a funkci na jeho změnu.

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

V tomto případě counter je aktuální hodnota stavu a setCounter je funkce na jeho aktualizaci.

2. `useEffect` na sledování změn a provádění vedlejších efektů

useEffect umožňuje spouštět kód, který závisí na změně stavu nebo vlastností (props). Můžete ho použít na provádění vedlejších efektů, jako je například načítání dat z API, manipulace s DOM nebo nastavení časovače.

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

Tento příklad aktualizuje název stránky pokaždé, když se hodnota counter změní.

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: Kdy se vyplatí vytvořit si vlastní logiku?

Pokud máte více komponent s identickou logikou, můžete vytvořit vlastní Hook. Tento Hook vám umožní sdílet logiku mezi různými komponentami, čímž se zjednoduší kód a zlepší jeho čitelnost.

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. Refaktorování větších komponent – rozdělení kódu pro lepší čitelnost

Při psaní React komponent se často stává, že kód je příliš dlouhý a těžko udržovatelný. Jedním ze způsobů, jak se tomu vyhnout, je rozdělení komponent na menší části. React umožňuje jednoduše rozdělit komponenty do samostatných souborů, což usnadňuje správu kódu.

5. Časté chyby: nekonečné smyčky, nesprávné volání Hooků, sdílení stavu

Při používání Hooků může dojít k několika běžným chybám. Například nesprávné použití useEffect může způsobit nekonečné smyčky, pokud se nespecifikuje správný seznam závislostí. Je důležité věnovat pozornost tomu, jak a kdy se aktualizují stavy a jak se používá useEffect.

Závěr

Správa stavu v Reactu je klíčová pro vytváření dynamických a interaktivních aplikací. Pomocí useState, useEffect a vlastních Hooků můžete efektivně spravovat stav aplikace a zjednodušit svou práci. Pokud chcete získat více praktických dovedností, doporučujeme vám náš kurz REACT – Praktický úvod do Reactu bez předchozích znalostí, kde se naučíte, jak pracovat s těmito technikami v praxi a vytvářet interaktivní aplikace v Reactu.

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