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.
últimas postagens
O gancho useEffect
O gancho useEffect é um gancho fundamental no 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";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;
Este código demonstra um componente App 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 estado dos dados.
Com o estado dos dados, o componente App renderiza a propriedade title de cada item no estado.
Características do gancho useEffect
- Amigável assíncrono: suporta operações assíncronas nativamente, tornando-o conveniente para 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.
- Limpeza: 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 gancho useLayoutEffect é semelhante ao gancho useEffect, 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 preciso sobre o layout e os estilos do DOM, como medir o tamanho de um elemento, redimensionar um elemento ou animar sua posição.
Abaixo está um exemplo de como usar o gancho useLayoutEffect para alterar a largura de um elemento de botão:
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 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: é executado de forma síncrona, potencialmente bloqueando a IU se a operação dentro dele for pesada.
- Leitura/gravação de DOM: é mais adequado para leitura e gravação diretamente no DOM, especialmente se você precisar de alterações antes da repintura do navegador.
O gancho useEffectEvent
O gancho useEffectEvent é um gancho React que resolve os problemas de dependências do gancho useEffect. 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";function App() {
const connect = (url) => {
};const logConnection = (message, loginOptions) => {
};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;
Este código demonstra o componente App que gerencia uma conexão com um serviço externo. A função connect se conecta a um URL especificado, enquanto a função logConnection registra os detalhes da conexão. Por último, a função onConnected chama a função logConnection 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 possui a variável url e a função onConnected. 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";function App() {
const connect = (url) => {
};const logConnection = (message, loginOptions) => {
};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 envolver a função onConnected com o gancho useEffectEvent, o gancho useEffectEvent sempre pode ler os valores mais recentes dos parâmetros message e loginOptions antes de passá-los 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 acione um evento que exija outros valores que você prefere não usar como dependências no useEffect.
Características do gancho useEffectEvent
- É mais adequado para efeitos colaterais causados por eventos.
- O gancho useEffectEvent não funciona com manipuladores de eventos como onClick, onChange, etc.
O gancho useEffectEvent ainda é experimental e não está disponível nos ganchos 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 do 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 acionados 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 compreender a diferença entre os ganchos useEffect, useLayoutEffect e useEffectEvent pode impactar significativamente a forma como você lida com efeitos colaterais e manipulação de DOM. É essencial considerar os requisitos e implicações específicos desses ganchos para criar aplicações fáceis de usar.