useEffect, useLayoutEffect e useEffectEvent: Uma comparação de ganchos de busca de dados no React

Os hooks do React são uma maneira poderosa de gerenciar efeitos colaterais em componentes React. Três dos hooks mais comuns para lidar com efeitos colaterais são useEffect, useLayoutEffect e useEffectEvent. Cada hook tem seu caso de uso único, então escolher o certo para o trabalho é essencial.

O gancho useEffect

a função de renderização de efeitos e a lista de dependências.

A função de efeito encapsula o código responsável pela produção de um efeito colateral, enquanto a matriz de dependências determina quando essa função deve ser executada. Nos casos em que a matriz de dependências permanece desprovida de conteúdo, a função de efeito será executada apenas durante a renderização inicial do componente. Por outro lado, se o conjunto de dependências contiver quaisquer alterações, a função de efeito será accionada para ser executada de novo com cada modificação.

De facto, uma ilustração excelente da utilização do gancho useEffect para recuperação de dados pode ser encontrada da seguinte forma:

 import React from "react";

function App() {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    fetch("<https://jsonplaceholder.typicode.com/posts>")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div className="app">
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

export default App;

Esse exemplo mostra um componente React funcional, chamado de componente “App”, que utiliza o gancho “useEffect” para recuperar dados de uma API externa. Especificamente, o manipulador de efeitos associado ao gancho “useEffect” obtém informações de amostra da API JSONPlaceholder, processa a resposta JSON e, em seguida, atualiza o estado “data” com os dados obtidos.

Tendo em conta o estado atual dos dados da nossa aplicação, a aplicação apresenta o atributo title associado a cada item respetivo dessa informação.

Características do gancho useEffect

A aplicação foi concebida tendo em conta o funcionamento assíncrono e incorpora esta funcionalidade de forma nativa, o que resulta numa experiência perfeita na obtenção de dados.

A utilização do hook useEffect está programada para ocorrer após a conclusão do processo de renderização de um determinado componente, garantindo assim que o referido hook não obstrui ou impede a interface do utilizador durante este período.

A diretiva oferece uma abordagem simplificada para a realização de tarefas de limpeza através do fornecimento de uma função que é automaticamente invocada após a conclusão de um ouvinte ou subscrição. Essa funcionalidade pode ser particularmente benéfica em situações em que o fechamento eficiente e a liberação de recursos são primordiais, como em casos que envolvem ouvintes ou assinaturas.

O gancho useLayoutEffect

A utilização do gancho useLayoutEffect espelha de perto a funcionalidade do gancho useEffect ; no entanto, ele opera de forma síncrona após todas as instâncias de alteração do DOM. Consequentemente, esta função é executada antes da capacidade do navegador de apresentar a representação visual no ecrã, o que a torna altamente vantajosa para empresas que necessitem de uma manipulação rigorosa da estrutura do Modelo de Objeto de Documento (DOM) e dos atributos de estilo, incluindo, mas não se limitando a, determinar as dimensões de um elemento específico, reajustar as dimensões de um elemento ou orquestrar a disposição espacial do referido elemento através de técnicas de animação.

Utilizando o gancho useLayoutEffect , é possível modificar as dimensões de um componente de botão, como demonstrado abaixo:

 import React from "react";

function App() {
  const button = React.useRef();

  React.useLayoutEffect(() => {
    const { width } = button.current.getBoundingClientRect();

    button.current.style.width = `${width \\+ 12}px`;
  }, []);

  return (
    <div className="app">
      <button ref={button}>Click Me</button>
    </div>
  );
}

export default App;

O trecho de código acima expande as dimensões do componente do botão em doze unidades, utilizando o utilitário funcional useLayoutEffect . Consequentemente, esta configuração garante que a largura ajustada é aplicada ao botão antes do seu aparecimento visual no dispositivo de visualização do utilizador.

Características do gancho useLayoutEffect

A execução síncrona do código JavaScript garante que a operação ocorre de forma sequencial sem qualquer interrupção da interface do utilizador. No entanto, esta abordagem pode resultar em atraso ou bloqueio da IU devido à natureza demorada de determinadas operações.

A operação de leitura/escrita do DOM foi concebida de forma ideal para o acesso imediato ao Modelo de Objeto de Documento, tanto para ler como para escrever dados, especialmente quando a conveniência de observar as modificações antes do processo de nova pintura do navegador é uma prioridade.

O gancho useEffectEvent

A utilização do gancho useEffectEvent apresenta-se como uma solução eficiente para os problemas de dependência difíceis inerentes ao gancho convencional useEffect . Aqueles bem versados no funcionamento do useEffect , ao que parece, podem encontrar-se a lidar com os meandros da sua matriz de dependências, que por vezes requer a inclusão de elementos para além do que é absolutamente necessário para um funcionamento correto.

Por exemplo:

 import React from "react";

function App() {
  const connect = (url) => {
    // logic for connecting to the url
  };

  const logConnection = (message, loginOptions) => {
    // logic for logging the connection details
  };

  const onConnected = (url, loginOptions) => {
    logConnection(`Connected to ${url}`, loginOptions);
  };

  React.useEffect(() => {
    const device = connect(url);
    device.onConnected(() => {
      onConnected(url);
    });

    return () => {
      device.disconnect();
    };
  }, [url, onConnected]);

  return <div></div>;
}

export default App;

O presente código mostra a funcionalidade das funções de gancho

O useEffect invocando o método connect e estabelecendo uma função de retorno de chamada assíncrona “onConnected” que será executada assim que o evento “onConnected” for acionado pelo dispositivo. Subsequentemente, esta função de retorno de chamada executa uma ação de registo que gera uma mensagem de ligação. Além disso, fornece uma função de desativação que entra em vigor após a desmontagem do componente, assumindo assim a responsabilidade de cortar a ligação com o dispositivo.

O DependencyArray incorpora o URL e um manipulador de eventos conhecido como “onConnected”. Cada vez que o componente App é renderizado, ele gera dinamicamente essa função específica. Consequentemente, o gancho do React, “useEffect”, passa por um processo iterativo em que o seu principal objetivo é atualizar repetidamente o estado do componente da aplicação.

Um dos métodos eficazes para resolver o problema do loop useEffect é utilizar o hook useEffectEvent, que permite uma solução simplificada sem sobrecarregar a matriz de dependência com valores adicionais injustificados.

 import React from "react";

function App() {
  const connect = (url) => {
    // logic for connecting to the URL
  };

  const logConnection = (message, loginOptions) => {
    // logic for logging the connection details
  };

  const onConnected = React.useEffectEvent((url, loginOptions) => {
    logConnection(`Connected to ${url}`, loginOptions);
  });

  React.useEffect(() => {
    const device = connect(url);
    device.onConnected(() => {
      onConnected(url);
    });

    return () => {
      device.disconnect();
    };
  }, [url]);

  return <div></div>;
}
export default App;

Ao utilizar o gancho useEffectEvent para envolver a função onConnected , garantimos que os parâmetros message e loginOptions estão sempre actualizados quando passados para o gancho useEffect . Consequentemente, este último já não está dependente do primeiro ou de quaisquer parâmetros que lhe sejam fornecidos.

Ao utilizar o gancho useEffect , pode ser vantajoso depender de um valor particular para desencadear o efeito, apesar do facto de o efeito necessitar de valores adicionais que podem não ser desejáveis como dependências dentro do gancho useEffect .

Características do gancho useEffectEvent

O sistema é excelente no tratamento de consequências desencadeadas por eventos.

A utilização do gancho useEffect não é compatível com funções de tratamento de eventos como onClick , onChange , etc., uma vez que estes eventos são desencadeados por interacções do utilizador em vez de dependências reactivas que podem ser monitorizadas para alterações pelo React.

O hook useEffect , uma ferramenta poderosa e versátil para gerenciar efeitos colaterais em componentes funcionais, permanece um recurso experimental a partir das versões do React até 18. Deve-se notar que sua disponibilidade pode variar entre diferentes versões ou compilações do React.

Quando usar qual gancho?

Cada um desses hooks de busca de dados tem sua própria aplicabilidade única, dependendo de circunstâncias específicas.

A utilização do hook useEffect no React fornece uma solução adequada para buscar e atualizar dados em um componente, pois permite o gerenciamento eficiente de operações assíncronas, mantendo uma base de código limpa e organizada.

Quando é necessário realizar modificações directas no Modelo de Objectos de Documento (DOM) de uma forma que exija a apresentação imediata das alterações, seria aconselhável utilizar useLayoutEffect . Esta função permite o tratamento eficiente de tais tarefas, assegurando que as acções especificadas são executadas após a apresentação inicial e antes de quaisquer actualizações ou refluxos subsequentes.

A utilização do gancho useEffect para operações leves não representa qualquer ameaça de obstrução da interface do utilizador, permitindo a sua execução com facilidade e comodidade.

A utilização de efeitos colaterais orientados a eventos pode ser alcançada empregando tanto o gancho useEffectEvent para capturar e manipular eventos, bem como o gancho useEffect para executar quaisquer efeitos colaterais necessários em resposta a esses eventos.

Manipular efeitos colaterais com eficiência

A utilização dos hooks do React revela uma extensa gama de potencialidades, e compreender a disparidade entre os hooks useEffect, useLayoutEffect e useEffectEvent pode influenciar substancialmente a forma como se gerencia os efeitos colaterais e a manipulação do DOM. É imperativo contemplar os pré-requisitos e ramificações particulares destes hooks para construir programas de software centrados no utilizador.