Efektový hook useEffect v Reacte

Pre prácu s efektmi sa používa hook useEffect. Pozrime sa na jeho fungovanie.

Na začiatok importujeme náš hook:

App.jsximport { useEffect } from 'react';

Vytvorme komponent App, ktorý obsahuje nadpis:

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

export default App;

Predpokladajme, že potrebujeme vykonať nejakú akciu po vykreslení, napríklad nastaviť farbu pozadia celej stránky. V tomto prípade bude externým systémom DOM prehliadača.

Aplikujme náš hook:

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

V druhom parametri sa odovzdáva pole závislostí. Patria do nich hodnoty používané funkciami komponentu. Zatiaľ sme ich nechali prázdne. V tomto prípade sa farba nastaví na zelenú iba raz po vykreslení. Druhý parameter nemôžeme úplne odstrániť, pretože váš komponent by mohol vstúpiť do nekonečného cyklu.