Como usar o hook useEffect do React

Aprenda como usar o hook useEffect do React na série Code React Hooks aqui no Hora de Codar!

Antes de explicar como usar o hook useEffect do React, a pergunta é: Você sabe o que é um hook?

Os React Hooks são uma ferramenta poderosa para desenvolver componentes funcionais reutilizáveis ​​de forma mais simples e eficiente. Ele é como uma chave de fenda ou um martelo que ajuda na construção de um brinquedo. Eles são como blocos de construção que nos ajudam a construir nossos aplicativos de uma maneira mais fácil e rápida.

Já entendido do assunto, você está pronto para aprender a usar o hook useEffect!

O useEffect é um Hook do React que sincroniza um componente com um sistema externo. Podemos importar o useEffect de duas maneiras.

import { useEffect } from "react";
export default function App(){
    useEffect();

ou:

import React from "react";
export default function App(){
  React.useEffect();

Ambas as maneiras funcionarão sem nenhuma diferença, os exemplos só mostram duas maneiras de importar e usar o useEffect.

Um exemplo de código que mostra como usar o hook useEffect:

import React from "react";
function App() {
  const [fotoPerfil, setFotoPerfil] = React.useState("");
  React.useEffect(() => {
    const fetchFotoPerfil = async () => {
      const response = await fetch("https://randomuser.me/api/");
      const data = await response.json();
      setFotoPerfil(data.results[0].picture.large);
    };
    fetchFotoPerfil();
  },[]);
  return (
    <div>
      <img src={fotoPerfil} alt="foto perfil" />
    </div>
  );
}
export default App;

const [fotoPerfil, setFotoPerfil] = React.useState("");

Nesta linha é utilizado um hook do React chamado useState, que é explicado no artigo anterior. Esse state tem uma string vazia e irá esperar ser preenchido com um dado.

Colocar o fetch dentro do useEffect garante que ele seja executado somente uma vez. O fetch é uma operação assíncrona que retorna uma Promise, usando o fetch dentro do useEffect podemos usar o recurso sintático async/await para tornar a chamada de API assíncrona e poder de maneira mais performática atualizar o estado do componente com os dados retornados pela API.

Outro exemplo é usar array de dependências com useEffect.

Sobre o array de dependências do useEffect

import React, { useState, useEffect } from "react";
function App() {
  const [count, setCount] = useState(0);
  // Executa apenas uma vez, quando o componente é montado
  useEffect(() => {
    console.log("Componente montado");
  }, []);
  // Executa sempre que o count for atualizado
  useEffect(() => {
    console.log(`Count atualizado: ${count}`);
  }, [count]);
  // Executa sempre que qualquer estado do componente for atualizado
  useEffect(() => {
    console.log("Estado atualizado");
  });
  function handleButtonClick() {
    setCount(count + 1);
  }
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleButtonClick}>Adicionar</button>
    </div>
  );
}
export default MyComponent;

No exemplo acima, o primeiro useEffect é executado apenas uma vez, quando o componente é montado, pois o array de dependências está vazio.

O segundo useEffect é executado sempre que o estado “count” é atualizado, pois o array de dependências contém apenas a variável “count”.

Já o terceiro useEffect não possui um array de dependências definido, o que significa que ele será executado sempre que qualquer estado do componente for atualizado.

Conclusão

O useEffect é um hook muito utilizado quando vamos consumir uma API, pois o useEffect ele é rodado após a renderização, prevenindo problemas de desempenho devido a uma chamada de API chamar várias vezes como em cada renderização do componente.

Aqui está um vídeo da playlist Simplificando os Hooks do React no canal Hora de Codar no YouTube falando sobre o hook useEffect, vídeo onde você irá aprender com exemplo prático como usar o hook useState do React.

Comunidade Hora de Codar

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!