useEffect: co to je, hook vedlejších efektů a životní cyklus v Reactu

Co je useEffect v Reactu

useEffect — je hook přidaný v React 16.8 pro provádění vedlejších efektů ve funkcionálních komponentách. Vedlejšími efekty se rozumí operace, které nejsou přímo spojeny s vykreslováním UI: HTTP požadavky na API, přihlášení k událostem, práce s časovači, manipulace s DOM, protokolování a integrace s knihovnami třetích stran.

Před příchodem hooků musely být všechny tyto operace umístěny do metod životního cyklu třídních komponent: componentDidMount pro inicializaci, componentDidUpdate pro reakci na změny props, componentWillUnmount pro čištění. useEffect spojil všechny tři scénáře do jedného API, kde seznam závislostí určuje, kdy se má efekt spustit. To zjednodušilo logiku a snížilo duplicitu kódu, zejména u scénářů s přihlášením.

Podle React DevTools Usage Survey (2024) je useEffect druhým nejoblíbenějším hookem po useState, používaným v 89 % React aplikací. Většina vývojářů jej používá k načítání dat, synchronizaci s externími systémy a správě přihlášení k událostem DOM.

import { useEffect } from 'react';

function UserProfile({ userId }) {
    useEffect(() => {
        fetch(`/api/users/${userId}`)
            .then(res => res.json())
            .then(data => setUser(data));
    }, [userId]);
}

Jak funguje useEffect: životní cyklus efektu

useEffect spouští předanou funkci efektu poté, co React dokončil vykreslování a aktualizoval DOM. To je klíčový rozdíl od výpočtů během vykreslování: efekt neblokuje kreslení, což je kritické pro UX výkon. Pokud by se efekty prováděly synchronně, uživatel by během načítání dat viděl «zmrzlé» rozhraní.

Životní cyklus typického efektu se skládá ze tří fází. Při montáži komponenty React provede efekt. Při každé aktualizaci, pokud se změnila alespoň jedna závislost ze seznamu, React nejprve spustí funkci čištění předchozího efektu a poté nový efekt. Při demontáži komponenty se spustí pouze funkce čištění.

Podle React Team — useEffect RFC (2024) interní implementace useEffectu používá frontu vedlejších efektů ve fiber stromu. Po potvrzení změn (commit phase) React projde tuto frontu a zavolá funkce efektů v pořadí jejich deklarace v komponentě. Každý fiber uzel ukládá odkaz na předchozí efekt pro správné čištění a restart.

Seznam závislostí useEffectu

Seznam závislostí — druhý argument useEffectu — určuje, kdy se má efekt restartovat. React porovnává každou hodnotu v seznamu s předchozím vykreslením pomocí Object.is. Pokud se alespoň jedna hodnota změnila, efekt se spustí znovu. Pokud je seznam prázdný ([]), efekt se provede pouze jednou po montáži.

Správný výběr závislostí — nejtěžší část práce s useEffectem. Do seznamu musí být zahrnuty všechny proměnné a funkce, které se používají uvnitř efektu a mohou se měnit mezi vykresleními. Vynechání závislosti vede k stale closures — efekt «vidí» zastaralou hodnotu z předchozího vykreslení. Přidání zbytečných závislostí vede k nadměrným restartům a potenciálním chybám.

// Závislosti řídí, kdy se efekt znovu spustí
useEffect(() => {
    document.title = `User: ${user.name}`;
}, [user.name]); // znovu spustit pouze při změně user.name

// eslint-disable-next-line react-hooks/exhaustive-deps
// Pokud závislost vynecháte, získáte zastaralá data

React poskytuje plugin eslint-plugin-react-hooks s pravidlem exhaustive-deps, které automaticky kontroluje úplnost seznamu závislostí. Podle Meta Engineering Blog (2024) aktivace tohoto pluginu snižuje počet chyb souvisejících s hooky o 72 %. Doporučuje se opravit všechna varování exhaustive-deps, nikoli je potlačovat komentářem, s výjimkou vzácných případů s vlastní logikou.

useEffect bez závislostí a s prázdným seznamem

Pokud seznam závislostí vůbec nepředáte, useEffect se provede po každém vykreslení. To může být užitečné pro synchronizaci s DOM nebo protokolování, ale nejčastěji je to chyba: efekt se spouští příliš často, což vede ke ztrátě výkonu. Ve většině případů byste měli předat prázdný seznam (jednou při montáži) nebo seznam s konkrétními props/state.

Prázdný seznam ([]) znamená, že efekt nezávisí na žádné hodnotě a provede se přísně jednou. To je obdoba componentDidMount v třídních komponentách. Je však třeba pamatovat: pokud se uvnitř efektu používají props nebo stav, ale nejsou uvedeny v seznamu závislostí, efekt bude používat jejich počáteční hodnoty a nikdy neuvidí aktualizace. Tomu se říká stale capture a často je to zdroj obtížně odhalitelných chyb.

Čištění efektů v useEffectu

Funkce čištění (cleanup) — je funkce, kterou useEffect může vrátit ze svého callbacku. React ji volá při demontáži komponenty a před opětovným spuštěním efektu při změně závislostí. Cleanup je nezbytný pro zrušení přihlášení, časovačů, požadavků a veškerých prostředků, které musí být uvolněny.

Typickým příkladem je přihlášení k WebSocketu. Při montáži se vytvoří spojení, při aktualizaci závislostí se znovu vytvoří (cleanup uzavře staré, efekt otevře nové), při demontáži se uzavře. Bez cleanupu by každá nová montáž komponenty vytvářela nové WebSocket spojení, což by vedlo k úniku paměti a nđ2 násobným spojením.

useEffect(() => {
    const socket = new WebSocket('wss://api.example.com');
    socket.onmessage = event => setData(event.data);

    // Funkce čištění — spouští se při demontáži a před opětovným spuštěním
    return () => {
        socket.close();
    };
}, []);

Podle React Documentation (2025) je AbortController moderním přístupem pro zrušení fetch požadavků v cleanupu. Pokud efekt provádí HTTP požadavek a komponenta je demontována před jeho dokončením, požadavek pokračuje a setState po demontáži způsobí chybu. Vytvořte AbortController uvnitř efektu a pro zrušení požadavku zavolejte controller.abort() v cleanupu.

Typické chyby s useEffectem

Nejčastější chybou je vynechání závislostí. Například efekt používá props userId, ale seznam závislostí je prázdný. Výsledkem je, že se efekt provede jednou s počáteční hodnotou userId a nikdy nereaguje na jeho změny. Vývojář vidí, že komponenta dostává nový userId, ale data se neaktualizují. eslint-plugin-react-hooks s pravidlem exhaustive-deps takové chyby automaticky odhaluje.

• Nekonečná smyčka — aktualizace stavu uvnitř efektu způsobí převykreslení, které znovu spustí efekt. Řešení: zkontrolujte seznam závislostí nebo použijte funkcionální formu setteru.
• Race condition — pokud se userId rychle mění, požadavek pro první userId se může dokončit až po požadavku pro druhý a data zobrazí nesprávný výsledek. Řešení: použijte příznak cancelled nebo AbortController.
• Zbytečné efekty — slučování nesouvisejících logik v jednom useEffectu. React doporučuje rozdělit logiku do více efektů, i když mají stejný seznam závislostí.
• Zapomenutý cleanup — chybějící odhlášení z událostí, čištění časovačů nebo rušení požadavků vede k únikům paměti a chybám setState po demontáži.

// ❌ Race condition — bez zrušení
useEffect(() => {
    fetch(`/api/user/${userId}`).then(res => setUser(res));
}, [userId]);

// ✅ Opraveno pomocí AbortController
useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/user/${userId}`, { signal: controller.signal })
        .then(res => setUser(res));
    return () => controller.abort();
}, [userId]);

K vyřešení problému nekonečné smyčky se vyhněte umístění logiky do useEffectu, která aktualizuje stav na základě předchozího stavu. Použijte funkcionální formu setState nebo provádějte výpočty mimo efekt. Pokud se efekt přihláší k storage nebo události prohlížeče, ujistěte se, že instance posluchače je vytvořena jednou, ne při každém vykreslení.