O Hook de Efeito useEffect no React

Para trabalhar com efeitos, utiliza-se o hook useEffect. Vamos ver como ele funciona.

Para começar, vamos importar nosso hook:

import { useEffect } from 'react';

Vamos criar um componente App que contenha um título:

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

export default App;

Suponha que precisamos realizar alguma ação após a renderização, por exemplo, definir a cor de fundo de toda a página. Neste caso, o sistema externo seria o DOM do navegador.

Vamos aplicar nosso hook:

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

No segundo parâmetro, é passado um array de dependências. Nele estão incluídos os valores utilizados pelas funções do componente. Por enquanto, nós o deixamos vazio. Neste caso, a cor será definida como verde apenas uma vez após a renderização. Remover completamente o segundo parâmetro não é possível, pois seu componente pode entrar em um loop infinito.

Usando o hook useEffect, altere o título da página.