A useEffect hatás Hook React-ben

A hatások kezelésére a useEffect Hookot használjuk. Nézzük meg, hogyan működik.

Először importáljuk a Hookot:

import { useEffect } from 'react';

Hozzunk létre egy App komponenst, amely egy címet tartalmaz:

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

export default App;

Tegyük fel, hogy valamilyen műveletet kell végrehajtanunk a renderelés után, például be kell állítanunk az egész oldal háttérszínét. Ebben az esetben a külső rendszer a böngésző DOM-ja lesz.

Alkalmazzuk a Hookot:

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

A második paraméter a függőségi tömb. Ebbe tartoznak a komponens függvényei által használt értékek. Most üresen hagytuk. Ebben az esetben a háttérszín zöldre vált csak egyszer, a renderelés után. A második paramétert teljesen elhagyni nem lehet, mivel a komponens végtelen ciklusba kerülhet.

A useEffect Hook segítségével változtasd meg az oldal címét.