M

MLOG

Português

Explore o hook React useEvent, uma ferramenta poderosa para criar referências estáveis de manipuladores de eventos, melhorando o desempenho e evitando re-renderizações.

React useEvent: Obtendo Referências Estáveis de Manipuladores de Eventos

Desenvolvedores React frequentemente encontram desafios ao lidar com manipuladores de eventos, especialmente em cenários envolvendo componentes dinâmicos e closures. O hook useEvent, uma adição relativamente recente ao ecossistema React, fornece uma solução elegante para esses problemas, permitindo que os desenvolvedores criem referências estáveis de manipuladores de eventos que não acionam re-renderizações desnecessárias.

Entendendo o Problema: Instabilidade dos Manipuladores de Eventos

No React, os componentes são re-renderizados quando suas props ou estado mudam. Quando uma função de manipulador de eventos é passada como uma prop, uma nova instância da função é frequentemente criada a cada renderização do componente pai. Essa nova instância da função, mesmo que tenha a mesma lógica, é considerada diferente pelo React, levando à re-renderização do componente filho que a recebe.

Considere este exemplo simples:


import React, { useState } from 'react';

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

  const handleClick = () => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  };

  return (
    

      
      
Count: {count}

    

  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

Neste exemplo, handleClick é recriado a cada renderização do ParentComponent. Mesmo que o ChildComponent possa ser otimizado (por exemplo, usando React.memo), ele ainda será re-renderizado porque a prop onClick mudou. Isso pode levar a problemas de desempenho, especialmente em aplicações complexas.

Apresentando o useEvent: A Solução

O hook useEvent resolve esse problema ao fornecer uma referência estável para a função do manipulador de eventos. Ele efetivamente desacopla o manipulador de eventos do ciclo de re-renderização de seu componente pai.

Embora useEvent não seja um hook nativo do React (a partir do React 18), ele pode ser facilmente implementado como um hook customizado ou, em alguns frameworks e bibliotecas, é fornecido como parte de seu conjunto de utilitários. Aqui está uma implementação comum:


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

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // UseLayoutEffect is crucial here for synchronous updates
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // The dependency array is intentionally empty, ensuring stability
  ) as T;
}

export default useEvent;

Explicação:

Usando o useEvent na Prática

Agora, vamos refatorar o exemplo anterior usando useEvent:


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

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // UseLayoutEffect is crucial here for synchronous updates
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // The dependency array is intentionally empty, ensuring stability
  ) as T;
}

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

  const handleClick = useEvent(() => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  });

  return (
    

      
      
Count: {count}

    

  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

Ao envolver handleClick com useEvent, garantimos que o ChildComponent receba a mesma referência de função em todas as renderizações do ParentComponent, mesmo quando o estado count muda. Isso evita re-renderizações desnecessárias do ChildComponent.

Benefícios de usar o useEvent

Casos de Uso para o useEvent

Alternativas e Considerações

Embora o useEvent seja uma ferramenta poderosa, existem abordagens alternativas e considerações a serem lembradas:

Considerações sobre Internacionalização e Acessibilidade

Ao desenvolver aplicações React para uma audiência global, é crucial considerar a internacionalização (i18n) e a acessibilidade (a11y). O useEvent em si não impacta diretamente i18n ou a11y, mas pode indiretamente melhorar o desempenho de componentes que lidam com conteúdo localizado ou recursos de acessibilidade.

Por exemplo, se um componente exibe texto localizado ou usa atributos ARIA com base no idioma atual, garantir que os manipuladores de eventos dentro desse componente sejam estáveis pode evitar re-renderizações desnecessárias quando o idioma muda.

Exemplo: useEvent com Localização


import React, { useState, useContext, createContext, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // UseLayoutEffect is crucial here for synchronous updates
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // The dependency array is intentionally empty, ensuring stability
  ) as T;
}

const LanguageContext = createContext('en');

function LocalizedButton() {
  const language = useContext(LanguageContext);
  const [text, setText] = useState(getLocalizedText(language));

  const handleClick = useEvent(() => {
    console.log('Button clicked in', language);
    // Perform some action based on the language
  });

  function getLocalizedText(lang) {
      switch (lang) {
        case 'en':
          return 'Click me';
        case 'fr':
          return 'Cliquez ici';
        case 'es':
          return 'Haz clic aquí';
        default:
          return 'Click me';
      }
    }

    //Simulate language change
    React.useEffect(()=>{
        setTimeout(()=>{
            setText(getLocalizedText(language === 'en' ? 'fr' : 'en'))
        }, 2000)
    }, [language])

  return ;
}

function App() {
  const [language, setLanguage] = useState('en');

  const toggleLanguage = useCallback(() => {
    setLanguage(language === 'en' ? 'fr' : 'en');
  }, [language]);

  return (
    
      

        
        
      

    
  );
}

export default App;

Neste exemplo, o componente LocalizedButton exibe texto com base no idioma atual. Ao usar useEvent para o manipulador handleClick, garantimos que o botão não seja re-renderizado desnecessariamente quando o idioma muda, melhorando o desempenho e a experiência do usuário.

Conclusão

O hook useEvent é uma ferramenta valiosa para desenvolvedores React que buscam otimizar o desempenho e simplificar a lógica dos componentes. Ao fornecer referências estáveis de manipuladores de eventos, ele evita re-renderizações desnecessárias, melhora a legibilidade do código e aumenta a eficiência geral das aplicações React. Embora não seja um hook nativo do React, sua implementação direta e seus benefícios significativos o tornam uma adição valiosa ao kit de ferramentas de qualquer desenvolvedor React.

Ao entender os princípios por trás do useEvent e seus casos de uso, os desenvolvedores podem construir aplicações React mais performáticas, fáceis de manter e escaláveis para uma audiência global. Lembre-se de sempre medir o desempenho e considerar as necessidades específicas de sua aplicação antes de aplicar técnicas de otimização.

React useEvent: Obtendo Referências Estáveis de Manipuladores de Eventos em Aplicações React Dinâmicas | MLOG