Introdução

O gancho useEffecté um dos ganchos importantes do React que você deve conhecer. Ele permite que você execute efeitos colaterais em componentes funcionais sempre que ocorrer uma alteração. Então, com o useEffectgancho, você pode fazer muitas coisas no React, como buscar dados, trabalhar com o DOM e muito mais.

Neste artigo, aprenderemos sobre o hook UseEffect no React com alguns exemplos práticos. Vamos direto ao assunto.

Como usar o UseEffect?

O gancho useEffectaceita dois parâmetros. A primeira é obrigatória, que é uma função de retorno de chamada. Por outro lado, o segundo parâmetro (array de valores ou array vazio) é opcional e o usamos quando queremos que o gancho seja executado após o momento em que um valor específico está sendo renderizado em nossa aplicação.

Para começar a usar o hook useEffect, primeiro você precisará importá-lo do pacote React.

Aqui está um exemplo:

import React, { useEffect } from 'react';

Quando alguma coisa em seu aplicativo for atualizada e você quiser fazer algo, você deve usar useEffect. O exemplo a seguir acessa o DOM para alterar o plano de fundo do corpo com useEffect:

useEffect(()=>{
  document.body.style.background = "black";
});

Aqui está o exemplo:

useEffect(()=>{
  document.body.style.background = "blue";
},[]);

Também podemos realizar efeitos colaterais quando um valor específico em nosso componente é alterado.

Aqui está um exemplo:

useEffect(()=>{
  console.log('Only run on name change')
},[name]);

A função de limpeza

Quando seu aplicativo precisa definir muitos efeitos colaterais, você terá que usar uma função de limpeza que limpará cada efeito colateral quando isso acontecer. Caso contrário, você afetará o desempenho do seu aplicativo.

Vamos dar um exemplo simples onde você terá uma página da web que mostra a largura da tela em pixels quando um usuário redimensiona a página. Para isso, precisaremos de um evento de redimensionamento.

Aqui está o exemplo:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const App = () =>{
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
useEffect(()=>{
    window.addEventListener("resize", ()=>{
      setScreenWidth(window.innerWidth);
    });
    // Return the cleanup function which cleans the effect(event).
    return ()=>{
      window.removeEventListener("resize", ()=>{
        setScreenWidth(window.innerWidth);
      });
    }
  });
return <>
  <div>{screenWidth}</div>
  </>
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />,
  rootElement
);

A função de limpeza é retornada dentro da função de retorno de chamada e nos permite remover os eventos depois que eles acontecem.

Buscando dados com UseEffect

Outro efeito colateral do gancho useEffecté buscar dados de APIs. Você pode buscar seus dados como faz com Vanilla JavaScript, você só precisa fazer isso dentro da função de retorno de chamada do gancho useEffectse estiver usando .then()e catch()para lidar com a promessa retornada.

Aqui está um exemplo de busca de dados de usuários da API do GitHub:

const App = ()=>{
 // The API URL.
 const APIurl = 'https://api.github.com/users';
 
// useState.
 const [users, setUsers] = useState([]);
 
// useEffect.
 useEffect(()=>{
  fetch(APIurl)
   .then(res => res.json())
   .then(data => setUsers(data));
},[]);
return(
<>
 <ul>
 {users.map(user => (
  <li key={user.id}>{user.login}</li>
 ))}
 </ul>
</>
)
}

Aqui está um exemplo:

const App = ()=>{
// The API URL.
  const APIurl = 'https://api.github.com/users';
// useState.
  const [users, setUsers] = useState([]);
// useEffect.
  useEffect(()=>{
    getUser();}
    ,[]);
// Separate function.
  async function getUser() {
    const response = await fetch(APIurl);
    const data = await response.json();
    setUsers(data);
  }return(
    <>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.login}</li>
      ))}
    </ul>
    </>
  );
}

Conclusão

useEffecté o gancho mais importante que você precisa entender ao lidar com o React. Ele permite adicionar recursos facilmente e realizar efeitos colaterais em componentes funcionais.

Obrigado por ler este artigo. Eu espero que você tenha achado isso útil.

Leitura adicional

Se você estiver interessado em conteúdo mais útil relacionado a JavaScript e desenvolvimento web, você pode assinar minha newsletter.