UseEffect, useLayoutEffect e useEffectEvent: uma comparação de ganchos de busca de dados no React

Os ganchos React são uma maneira poderosa de gerenciar efeitos colaterais nos componentes React. Três dos ganchos mais comuns para lidar com efeitos colaterais são useEffect, useLayoutEffect e useEffectEvent. Cada gancho tem seu caso de uso exclusivo, portanto, é essencial escolher o gancho certo para o trabalho.

O gancho useEffect

O useEfeito gancho é um gancho fundamental em React que permite executar efeitos colaterais, como manipulação de DOM, operações assíncronas e busca de dados em componentes funcionais. Este gancho é uma função que recebe dois argumentos, a função de efeito e a matriz de dependência.

A função de efeito contém o código que executa o efeito colateral e a matriz de dependência determina quando a função de efeito é executada. Se a matriz de dependência estiver vazia, a função de efeito será executada apenas uma vez na renderização inicial do componente. Caso contrário, a função de efeito será executada sempre que qualquer um dos valores na matriz de dependência for alterado.

Aqui está um exemplo de como usar o gancho useEffect para buscar dados:

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

Este código demonstra um Aplicativo componente que busca dados de uma API externa usando o gancho useEffect. A função de efeito de useEffect busca dados de amostra da API JSONPlaceholder. Em seguida, ele analisa a resposta JSON e define os dados recuperados para o dados estado.

Com o estado dos dados, o componente App renderiza o título propriedade de cada item do estado.

Características do gancho useEffect

• Amigável assíncrono: oferece suporte nativo a operações assíncronas, tornando-o conveniente para a busca de dados.
• Executa após a renderização: o gancho useEffect executa seus efeitos depois que o aplicativo renderiza o componente, garantindo que o gancho não bloqueie a IU.
• Limpar: fornece uma maneira integrada de realizar a limpeza retornando uma função. Isso pode ser especialmente útil ao trabalhar com ouvintes ou assinaturas.

O gancho useLayoutEffect

O useLayoutEffect gancho é semelhante ao useEfeito hook, mas é executado de forma síncrona após todas as mutações do DOM. Isso significa que ele é executado antes que o navegador possa pintar a tela, tornando-o adequado para tarefas que exigem controle sobre o layout e estilos do DOM, como medir o tamanho de um elemento, redimensionar um elemento ou animar seu posição.

Abaixo está um exemplo de como usar o gancho useLayoutEffect para alterar a largura de um botão elemento:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

O bloco de código acima aumenta a largura do elemento do botão em 12 pixels usando o gancho useLayoutEffect. Isso garante que a largura do botão aumente antes que ele seja exibido na tela.

Características do gancho useLayoutEffect

• Síncrono: ele é executado de forma síncrona, potencialmente bloqueando a IU se a operação dentro dela for pesada.
• Leitura/gravação de DOM: é mais adequado para ler e gravar diretamente no DOM, especialmente se você precisar de alterações antes da repintura do navegador.

O gancho useEffectEvent

O useEffectEvent hook é um gancho React que resolve os problemas de dependências do useEfeito gancho. Se você está familiarizado com useEffect, sabe que sua matriz de dependências pode ser complicada. Às vezes, você deve colocar mais valores estritamente necessários na matriz de dependência.

Por exemplo:

import React from"react";
functionApp() {
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>;
}
exportdefault App;

Este código demonstra o Aplicativo componente que gerencia uma conexão com um serviço externo. O conectar função se conecta a um URL especificado, enquanto o logConnection função registra os detalhes da conexão. Por último, o onConnected função chama o logConnection função para registrar uma mensagem de conexão bem-sucedida quando o dispositivo se conecta.

O gancho useEffect chama a função connect e, em seguida, configura uma função de retorno de chamada onConnected para ser executada quando o dispositivo aciona o evento onConnected. Este retorno de chamada registra uma mensagem de conexão. Ele retorna uma função de limpeza que é ativada quando o componente é desmontado. Esta função de limpeza é responsável por desconectar o dispositivo.

A matriz de dependência tem o url variável e o onConnected função. O componente App criará a função onConnected em cada renderização. Isso fará com que a função useEffect seja executada em um loop, que continuará renderizando novamente o componente App.

Existem várias maneiras de resolver o problema do loop useEffect. Ainda assim, a maneira mais eficiente de fazer isso sem adicionar mais valores desnecessários ao seu array de dependências é com o gancho useEffectEvent.

import React from"react";
functionApp() {
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>;
}
exportdefault App;

Ao envolver a função onConnected com o gancho useEffectEvent, o gancho useEffectEvent sempre pode ler os valores mais recentes do mensagem e opções de login parâmetros antes de passá-lo para o gancho useEffect. Isso significa que useEffect não precisa depender da função onConnected ou dos valores passados ​​​​para ela.

O gancho useEffectEvent é útil quando você deseja que seu useEffect dependa de um valor específico, mesmo que o efeito aciona um evento que requer outros valores que você prefere não usar como dependências no useEfeito.

Características do gancho useEffectEvent

• É mais adequado para efeitos colaterais causados ​​por eventos.
• O useEffectEvent hook não funciona com manipuladores de eventos como onClick, em mudança, etc.

O gancho useEffectEvent ainda é experimental e não está disponível em Ganchos do React versão 18.

Quando usar qual gancho?

Cada um dos ganchos de busca de dados acima é adequado para diferentes situações:

• Buscando dados: O useEffect é uma excelente escolha.
• Manipulações diretas de DOM: se você precisar fazer alterações síncronas no DOM antes de repintar, opte por useLayoutEffect.
• Operações leves: para operações que não correm o risco de bloquear a IU, você pode usar useEffect livremente.
• Efeitos colaterais causados ​​por eventos: Use o gancho useEffectEvent para agrupar os eventos e o gancho useEffect para executar os efeitos colaterais.

Lidar com os efeitos colaterais de maneira eficiente

Os ganchos React abrem um mundo de possibilidades, e entender a diferença entre useEffect, Os ganchos useLayoutEffect e useEffectEvent podem impactar significativamente como você lida com efeitos colaterais e DOM manipulação. É essencial considerar os requisitos e implicações específicos desses ganchos para criar aplicações fáceis de usar.