Gancho React useEffect(): uso, como e quando usá-lo

Introdução ao gancho useEffect()

useeffect gancho um componente-chave.Ele lida com tarefas como busca de dados, configuração de ouvintes de eventos ou modificação do DOM e permite que os usuários realizem efeitos colaterais usando componentes funcionais. Ele também controla o ciclo de vida do componente.

Ogancho useeffect alavanca dois argumentos, uma função e um array de dependência opcional.A função passada como o primeiro argumento é executada após a renderização inicial do componente e novamente após cada atualização. Você pode indicar as variáveis ​​das quais um efeito depende usando a matriz de dependência. Uma nova execução do efeito é executada se qualquer uma das variáveis ​​da matriz de dependência mudar.

Inerentemente, ogancho useeffect foi criado para lidar com os desafios enfrentados no ciclo de vida dos componentes da classe ES6.No entanto, agora se tornou um dos principais conceitos de reação.

Com este resumo sobreo que é useeffect em react , vamos agora olhar para sua sintaxe.

Sintaxe básica do gancho useEffect()

useEffect suporta dois argumentos ; o segundo argumento é opcional. A sintaxe é a seguinte:

useEffect(<função>, <dependência>)

A função inclui a lógica de efeito colateral. Ele provoca a execução de um callback logo após a atualização do DOM.

A dependência contém uma matriz opcional de dependências de seus efeitos colaterais, ou seja, valores de estado e props. Observe que ogancho de efeito de uso executa o retorno de chamada apenas se as dependências forem alteradas durante as renderizações.

A sintaxe atende ao propósito único de useEffect(). Ele permite que você coloque sua lógica de efeito colateral dentro da função de retorno de chamada e, em seguida, use o argumento de dependências para controlar quando você precisa que o efeito colateral seja executado.

Você pode considerar a seguinte sintaxe ao implementar o gancho useEffect():

// importa useEffect

import { useEffect } de 'reagir';

function MeuComponent() {

// chama acima do JSX retornado

// passa dois argumentos para ele, ou seja, um array e uma função

useEffect(() => {

// função de efeito

retorno () => {

// função de limpeza

};

}, [/* array de dependências */]);

// lógica de renderização do componente

}

}

Confira nossoscursos de tecnologia gratuitospara obter uma vantagem sobre a concorrência.

Montando e desmontando componentes com gancho useEffect()

Montagem

O estágio inicial do ciclo de vida de um componente React envolve a criação e inserção de componentes no DOM. Este estágio do ciclo de vida de react useeffect inclui o método de ciclo de vida componentDidMount, que é executado quando o componente é montado.

Aqui está um exemplo de montagem de componentes usando o gancho useEffect().

componenteDidMount() {

console.log(“O componente foi montado com sucesso”);

this.setState({

carregado: verdadeiro

})

}

No exemplo acima, componentDidMount permite usar setState. Assim, você pode definir e alterar facilmente o estado no método de ciclo de vida. O método correspondente emprega chamadas de API, chama endpoints remotos e busca dados.

Desmontando

Este método de ciclo de vida react useeffect lida com a limpeza em um DOM.É como umafunção de limpeza useeffect que remove um componente do DOM.É chamado de desmontagem no React. A desmontagem usa apenas um método de ciclo de vida, ou seja, componentWillUnmount. Ele é chamado quando você deseja remover um componente do DOM.

componentWillUnmount() {

console.log(“O componente foi desmontado com sucesso”);

}

Usando o gancho use effect() para lidar com mudanças de estado

O useeffect é executado após cada renderização.Também é usado para executar certos códigos em reconhecimento de uma mudança de estado. Você pode controlar o tempo de execução do efeito passando o segundo argumento no gancho useEffect(). O segundo argumento funciona como um array de dependências, ou seja, se as variáveis ​​correspondentes forem alteradas, o efeito deve ser executado novamente. Observe que o estado é um dos tipos de variáveis.

A seção a seguir ilustra um exemplo para explicar como ogancho de efeito de uso lida com mudanças de estado.

Por exemplo, você pode querer executar um efeito colateral com base em um valor de “dia”. Suponha que você tenha um efeito colateral para exibir uma mensagem de saudação dependendo do valor do dia. O valor do dia é salvo em uma variável de estado.

Sempre que você escolhe um dia, o estado é atualizado. A alteração no valor do estado permite atualizar a mensagem de saudação. Você deve passar a variável de estado para o gancho useEffect como um subconjunto da matriz de dependência.

useEffect(() =>

{

// Efeito colateral

}, [estado]);

No exemplo acima de useeffect react native , o efeito colateral seria executado se o valor da variável de estado fosse atualizado.

Explore nossos cursos populares de engenharia de software

Usando o gancho useEffect() com APIs e solicitações de rede

Você pode usar o gancho 'useEffect()' com APIs e solicitações de rede para buscar dados de um servidor e lidar com erros. Aqui está um exemplo de como usar 'useEffect()' com uma API e lidar com erros de rede:

import React, { useState, useEffect } from 'react';

function MeuComponent() {

const [dados, setData] = useState(nulo);

const [erro, setError] = useState(nulo);

useEffect(() => {

função assíncrona buscarData() {

tentar {

resposta const = await fetch('https://api.example.com/data');

if (!resposta.ok) {

throw new Error('A resposta da rede não foi correta');

}

const json = aguardo resposta.json();

setData(json);

} pegar (erro) {

setError(erro);

}

}

buscarData();

}, []);

se (erro) {

return <div>Erro: {error.message}</div>;

}

if (!dados) {

return <div>Carregando…</div>;

}

retornar (

<div>

<p>{data.message}</p>

</div>

);

}

Você pode modificar este exemplo para incluir qualquer funcionalidade adicional necessária para lidar com solicitações de rede e respostas de API.

Técnicas avançadas de gancho useEffect()

Uma das técnicas nativas avançadas de reação de efeito de uso é a memorização.É uma técnica de otimização em que a saída de uma chamada de função é armazenada em cache. Posteriormente, afunção de retorno useeffect o retorna quando a mesma entrada é alimentada novamente.

Outra técnica conhecida do Hook useEffect() é o useMemo Hook. Permite calcular um valor e memorizá-lo. Sua sintaxe é:

importar { useMemo } de 'reagir'

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

dependências do gancho useEffect()

As dependências do gancho useEffect() contêm uma lista de dependências do seu efeito colateral, além de incluir valores de estado ou propriedade. O argumento dependencies permite que você capture alguns eventos do ciclo de vida do componente, como um componente é montado ou um valor de estado/prop específico é atualizado.

O argumento dependencies permite controlar o tempo em que o efeito colateral é invocado, independentemente do ciclo de renderização do componente.

Renderização condicional com gancho useEffect()

useEffect Hook permite que você coloque as condições dentro do gancho. Aqui está um exemplo.

useEffect(() => {

if (deveria executar) {

// (lista de condições)

}

}, [deve executar])

Você precisa mencionar as condições obrigatórias que deseja executar na função shouldExecute.

use Effect() Gancho vs ComponentDidMount() e ComponentDidUpdate()

useEffect() Hook vs componentDidUpdate():

useEffect() Hook vs componentDidMount():

Erros comuns e práticas recomendadas com o gancho useEffect().

Erros comuns

1. Não definir dependências

useEffect é executado sempre que um componente é renderizado. Portanto, você deve definir os valores que devem acionar uma nova renderização. Caso contrário, sua função useEffect pode criar problemas de desempenho.

2. Não limpar depois de executar o hook useEffect

useEffect pode retornar uma função de limpeza que é executada quando o componente é desmontado. Não limpar após o useEffect pode criar vazamentos de memória e outras preocupações. Portanto, é importante usar a função de limpeza useeffect .

3. Usando setState na função useEffect sem dependência

Se você atualizar o estado em useEffect, ele acionará outra renderização. Isso pode levar a um loop infinito. Para evitar isso, você sempre deve definir a variável de estado que está atualizando como uma dependência em um hook useEffect.

Explore nossos cursos gratuitos de desenvolvimento de software

Melhores Práticas:

• Se você quiser usar o gancho useEffect, certifique-se de usar apenas um por componente. No caso de vários ganchos useEffect, todos eles seriam executados sempre que um componente fosse renderizado. Assim, pode criar problemas de desempenho e comportamento inesperado.
• Certifique-se de não usar o gancho useEffect dentro de condições, loops ou funções aninhadas. Se você usar State dentro do loop for, o React criará uma nova variável de estado toda vez que o loop for executado. Assim, leva a um comportamento inesperado.
• Certifique-se de não usar demais o gancho useEffect. Eles podem tornar seu código difícil de ler e podem influenciar o desempenho se usados ​​excessivamente.
• Você só deve chamar o hook useEffect das funções do React. Se você chamá-lo de um componente de classe, verá um erro.

Conclusão

É melhor usar useeffect em react se você quiser acessar facilmente os props e o estado dos componentes sem escrever nenhum código adicional.Simplifica significativamente os efeitos colaterais em componentes, pois facilita a execução de efeitos colaterais quando o estado ou prop muda. Você pode considerar os aspectos e as melhores práticas discutidos acima para garantir que seus componentes React tenham um desempenho ideal.

Aprender habilidades de desenvolvimento de software exigentes é crucial na era atual. Você pode se equipar com essas habilidades de ponta ao buscar o Mestrado em Ciência da Computação da UpGrad pela LJMU . O curso faz de você um desenvolvedor de software especializado, transmitindo habilidades como Java, Python e especialização em áreas relacionadas. Aprender completamente os aspectos abordados neste curso ajuda você a explorar oportunidades de trabalho como desenvolvedor de javascript, engenheiro de software e engenheiro de back-end.

Além de dominar as habilidades de desenvolvimento de software, o upGrad também ajuda você a melhorar sua carreira como desenvolvedor full-stack por meio de cursos como Programa Executivo PG em Desenvolvimento Full Stack do IIITB e Bootcamp de Desenvolvimento de Software Full Stack . Esses programas fornecem plataformas de aprendizado imersivo que permitem que os candidatos adquiram habilidades exigentes de desenvolvimento de pilha completa e efetivamente abram um caminho para uma carreira de sucesso!