Entenda como funciona o useEffect

Quando você tem muitas pessoas e está tentando satisfazer a contribuição de todos, você geralmente acaba com algo Tão incrivelmente genérico que não tem ponto de vista. Rob Zombie.

background-image

Se você não conhece nada sobre hooks do react, eles foram introduzidos a partir da versão 16.8 esse é o link da documentação.

Hoje vou falar um pouco do useEffect que é um pouco mais comum em aplicações react. Ele recebe uma função como primeiro parâmetro e também pode receber um array de variáveis para controlar esse hook.

Primeiro ponto dele é que se você está acostumado a trabalhar com class e usa os diversos ciclos de vida do react leia a doc. Ele vem para substituir componentDidMount, componentWillUnmount e componentDidUpdate.

Agora vou compartilhar alguns exemplos simples, para entendermos como esse hook funciona. Vamos lá. Vou usar a API do github para listar alguns repositórios, no primeiro caso, quero que o useEffect seja chamado apenas uma vez, quando o componente é montado em tela.

import { useEffect, useState } from 'react'
import './App.css'

function App() {

  const [repos, setRepos] = useState([])

  useEffect(() => {
    const fetchRepos = async () => {
      const repos = await fetch('https://api.github.com/users/mayconbalves/repos?per_page=50')
      const data = await repos.json()
      setRepos(data)
    }

    fetchRepos()
  })

  return (
    <div className="App">
      <h1>Repos github</h1>
      <ul>
        {repos.map(repo => {
          return (
            <li key={repo.id}>
              <p>{repo.name}</p>
            </li>
          )
        })}
      </ul>
    </div>
  );
}

export default App

Agora se quisermos que a função seja chamada de novo, podemos “mandar” ela ficar observando uma variável repository na linha 11 assim que ela mudar o useEffect será executado mais uma vez. Percebam que no exemplo abaixo diferente do exemplo acima, eu passo um user através do que o usuário digitar no input, e assim que ele apertar o botão eu chamo o handleSubmit da linha 19 chamando a função fetchRepos mais uma vez.

import { useEffect, useState } from 'react'
import './App.css'

function App() {

  const [repos, setRepos] = useState([])
  const [values, setValues] = useState({ repository: '' })

  useEffect(() => {
    fetchRepos()
  }, [values.repository])

  const fetchRepos = async (user = 'mayconbalves') => {
    const repos = await fetch(`https://api.github.com/users/${user}/repos?per_page=50`)
    const data = await repos.json()
    setRepos(data)
  }

  const handleSubmit = () => {
    fetchRepos(values.repository)
  }

  const inputChange = (e) => {
    const { name, value } = e.target

    setValues({
      ...values,
      [name]: value
    })
  }

  return (
    <div className="App">
      <h1>Repos github</h1>
      <input
        name="repository"
        onChange={inputChange}
        placeholder="digite o nome do seu usuário"
        value={values.repository}
      />

      <button type="button" onClick={handleSubmit}>Buscar</button>
      <ul>
        {repos.map(repo => {
          return (
            <li key={repo.id}>
              <p>{repo.name}</p>
            </li>
          )
        })}
      </ul>
    </div>
  );
}

export default App

E por último, podemos passar como segundo parâmetro um array vazio, que significa que o seu useEffect será executado apenas uma vez.

import { useEffect, useState } from 'react'
import logo from './logo.svg'
import './App.css'

function App() {

  const [repos, setRepos] = useState([])

  useEffect(() => {
    const fetchRepos = async (user) => {
      const repos = await fetch(`https://api.github.com/users/${user}/repos?per_page=50`)
      const data = await repos.json()
      setRepos(data)
    }

    fetchRepos('mayconbalves')
  }, [])

  return (
    <div className="App">
      <h1>Repos github</h1>
      <ul>
        {repos.map(repo => {
          return (
            <li key={repo.id}>
              <p>{repo.name}</p>
            </li>
          )
        })}
      </ul>
    </div>
  );
}

export default App

Nota: A diferença desse para o primeiro exemplo é que a função fetchRepos nesse caso espera um parâmetro.

Esse último exemplo é bem interessante e é bem legal vocês fazerem o teste abrindo a aba de network do navegador e ver o resultado, primeiro basta copiar o código acima. Depois altere o useEffect para isso aqui:

exemplo

Espero que tenham gostado, lembrando que qualquer dúvida, feedback ou sugestões podem mandar, ficarei feliz em responder ou aprender mais 😃. Boa semana e abraços quentinhos para vocês !!!

Removendo objetos duplicados de dentro de um array usando Set()Post AnteriorPróximo Post