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:

App.jsximport { useEffect } from 'react';

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

App.jsxfunction 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:

App.jsxfunction 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.