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:

import { useEffect } from 'react';

Vytvořme komponentu App obsahující nadpis:

function 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:

function 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.

Pomocí hooku useEffect změňte titulek stránky.