1
resposta

Dúvida sobre o uso do segundo parâmetro useEffect

Boa tarde!

Reparei que quando eu executei o useEffect em Perfil.tsx sem colocar o array vazio como segundo parâmetro, a página ficou com o callback infinito fazendo get na API. Colocando conforme o curso o array vazio, ele executou apenas uma vez quando montou o componente. Gostaria de saber o que seria o segundo parametro do UseEffect e porque quando eu não passo nada ele fica num looping executando o código dentro de useEffect?

Exemplo em questão do curso:

  useEffect(() => {
    async function getDadosPaciente() {
      const pacienteId = await AsyncStorage.getItem('pacientId')

      if (!pacienteId) return null;

      const resultado = await pegarDadosPaciente(pacienteId)

      if (resultado) {
        setDadosPaciente(resultado)
        console.log(resultado)
      }
    }

    getDadosPaciente()
  }, [])

Passando dessa forma ele fica num looping infinito logando no terminal:

  useEffect(() => {
    async function getDadosPaciente() {
      const pacienteId = await AsyncStorage.getItem('pacientId')

      if (!pacienteId) return null;

      const resultado = await pegarDadosPaciente(pacienteId)

      if (resultado) {
        setDadosPaciente(resultado)
        console.log(resultado)
      }
    }

    getDadosPaciente()
  })

No aguardo, obrigado!

1 resposta

Olá, João Gustavo, tudo bem?

Primeiramente, gostaria de agradecer por compartilhar sua dúvida conosco. É importante entender o funcionamento do segundo parâmetro do hook useEffect no React e como ele influencia o comportamento da sua aplicação.

O segundo parâmetro do useEffect é um array de dependências opcionais. Quando você o utiliza, está dizendo ao React quais variáveis ou estados devem ser observados para que o efeito seja executado novamente. Caso esse array seja deixado vazio, como no exemplo do curso, o efeito será executado apenas uma vez, no momento em que o componente é montado.

Quando você não passa nenhum segundo parâmetro, o useEffect será executado sempre que ocorrer qualquer alteração no componente ou no estado. Isso pode resultar em um loop infinito, como você mencionou, caso o efeito esteja modificando o estado ou disparando ações que causam atualizações no próprio componente.

Lembrando que o array de dependências deve ser analisado cuidadosamente. Se você passar uma variável no array e essa variável sofrer alterações, o efeito será executado novamente. Caso contrário, ele não será executado. Portanto, é importante garantir que todas as dependências necessárias estejam incluídas nesse array.

Espero que esta explicação tenha esclarecido suas dúvidas em relação ao segundo parâmetro do hook useEffect. Se você tiver mais perguntas, não hesite em perguntar. Estou aqui para ajudar!

Espero que tenha te ajudado, bons estudos!