El Hook de Efecto useEffect en React

Para trabajar con efectos se utiliza el hook useEffect. Veamos cómo funciona.

Primero importemos nuestro hook:

import { useEffect } from 'react';

Creemos un componente App que contenga un título:

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

export default App;

Supongamos que necesitamos realizar alguna acción después del renderizado, por ejemplo, establecer el color de fondo de toda la página. En este caso, el sistema externo sería el DOM del navegador.

Apliquemos nuestro hook:

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

En el segundo parámetro se pasa un array de dependencias. Estas incluyen los valores utilizados por las funciones del componente. Por ahora lo hemos dejado vacío. En este caso, el color se establecerá en verde solo una vez después del renderizado. No se puede eliminar por completo el segundo parámetro, ya que tu componente podría entrar en un ciclo infinito.

Usando el hook useEffect, cambia el título de la página.