React useEvent: Estabilizando Manipuladores de Eventos para Aplicações Robustas

Usando `useEvent` na Prática

Vamos revisitar os exemplos anteriores e aplicar `useEvent` para resolver os problemas.

Corrigindo Closures Obsoletos

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

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Agora, `handleClick` é uma função estável, mas quando chamada, ela acessa o valor mais recente de `count` através da ref. Isso evita o problema de closure obsoleto.

Prevenindo Re-renderizações Desnecessárias

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Como `handleClick` agora é uma referência de função estável, `ChildComponent` só será re-renderizado quando suas props *realmente* mudarem, melhorando o desempenho.

Implementações Alternativas e Considerações

`useEvent` com `useLayoutEffect`

Em alguns casos, você pode precisar usar `useLayoutEffect` em vez de `useEffect` dentro da implementação `useEvent`. `useLayoutEffect` é disparado de forma síncrona após todas as mutações do DOM, mas antes que o navegador tenha a chance de pintar. Isso pode ser importante se o manipulador de eventos precisar ler ou modificar o DOM imediatamente após o evento ser acionado. Este ajuste garante que você capture o estado DOM mais atualizado dentro do seu manipulador de eventos, evitando potenciais inconsistências entre o que seu componente exibe e os dados que ele usa. A escolha entre `useEffect` e `useLayoutEffect` depende dos requisitos específicos do seu manipulador de eventos e do tempo das atualizações do DOM.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Advertências e Problemas Potenciais

• Complexidade: Embora `useEvent` resolva problemas específicos, ele adiciona uma camada de complexidade ao seu código. É importante entender os conceitos subjacentes para usá-lo de forma eficaz.
• Uso excessivo: Não use `useEvent` indiscriminadamente. Aplique-o apenas quando estiver encontrando closures obsoletos ou re-renderizações desnecessárias relacionadas a manipuladores de eventos.
• Testes: Testar componentes que usam `useEvent` requer atenção cuidadosa para garantir que a lógica correta do manipulador esteja sendo executada. Você pode precisar simular o hook `useEvent` ou acessar o `handlerRef` diretamente em seus testes.

Perspectivas Globais sobre o Tratamento de Eventos

Ao criar aplicações para um público global, é crucial considerar as diferenças culturais e os requisitos de acessibilidade no tratamento de eventos:

• Navegação por Teclado: Garanta que todos os elementos interativos sejam acessíveis por meio da navegação por teclado. Usuários em diferentes regiões podem depender da navegação por teclado devido a deficiências ou preferências pessoais.
• Eventos de Toque: Suporte eventos de toque para usuários em dispositivos móveis. Considere regiões onde o acesso à internet móvel é mais prevalente do que o acesso por desktop.
• Métodos de Entrada: Esteja atento aos diferentes métodos de entrada usados em todo o mundo, como os métodos de entrada chinês, japonês e coreano. Teste sua aplicação com esses métodos de entrada para garantir que os eventos sejam tratados corretamente.
• Acessibilidade: Sempre siga as melhores práticas de acessibilidade, garantindo que seus manipuladores de eventos sejam compatíveis com leitores de tela e outras tecnologias assistivas. Isso é especialmente crucial para experiências de usuário inclusivas em diversas origens culturais.
• Fusos Horários e Formatos de Data/Hora: Ao lidar com eventos que envolvem datas e horas (por exemplo, ferramentas de agendamento, calendários de compromissos), esteja atento aos fusos horários e formatos de data/hora usados em diferentes regiões. Forneça opções para os usuários personalizarem essas configurações com base em sua localização.

Alternativas para `useEvent`

Embora `useEvent` seja uma técnica poderosa, existem abordagens alternativas para gerenciar manipuladores de eventos no React:

• Elevação de Estado: Às vezes, a melhor solução é elevar o estado do qual o manipulador de eventos depende para um componente de nível superior. Isso pode simplificar o manipulador de eventos e eliminar a necessidade de `useEvent`.
• `useReducer`:** Se a lógica de estado do seu componente for complexa, `useReducer` pode ajudar a gerenciar as atualizações de estado de forma mais previsível e reduzir a probabilidade de closures obsoletos.
• Componentes de Classe: Embora menos comuns no React moderno, os componentes de classe fornecem uma maneira natural de vincular manipuladores de eventos à instância do componente, evitando o problema de closure.
• Funções Inline com Dependências: Use chamadas de função inline com dependências para garantir que valores novos sejam passados para os manipuladores de eventos. `onClick={() => handleClick(arg1, arg2)}` com `arg1` e `arg2` atualizados via estado criará uma nova função anônima em cada renderização, garantindo assim valores de closure atualizados, mas causará re-renderizações desnecessárias, o próprio problema que `useEvent` resolve.