Effect Hook useEffect v Reactu

Pro práci s efekty se používá hook useEffect. Podívejme se na jeho fungování.

Nejprve importujme náš hook:

App.jsximport { useEffect } from 'react';

Vytvořme komponentu App obsahující nadpis:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

Předpokládejme, že potřebujeme provést nějakou akci po vykreslení, například nastavit barvu pozadí celé stránky. V tomto případě bude externím systémem DOM prohlížeče.

Aplikujme náš hook:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

V druhém parametru se předává pole závislostí. Patří do nich hodnoty používané funkcemi komponenty. Prozatím jsme je nechali prázdné. V tomto případě se barva nastaví na zelenou pouze jednou po vykreslení. Druhý parametr nelze úplně odstranit, protože váš komponent by mohl vstoupit do nekonečné smyčky.