Event Listeners e React Hooks

Problema: Ao usar React hooks e event listeners, o log do console de estado exibe informações incorretas.

Descrição do problema

Considere o CodeSandbox fornecido: https://codesandbox.io/s/lrxw1wr97m. Quando você clica duas vezes no botão "Adicionar cartão" e, em seguida, clica em "Botão1" no primeiro cartão, o console exibe corretamente o estado com dois cartões. No entanto, se você clicar em "Button2" no mesmo cartão (que é tratado por um ouvinte de evento), o console exibirá incorretamente apenas um cartão no estado.

Motivo do estado incorreto

O O problema surge do tratamento diferente dos manipuladores de eventos nos componentes CardsProvider e Card. Os manipuladores de eventos definidos no componente funcional CardsProvider, handleCardClick e handleButtonClick, são redefinidos cada vez que o componente é renderizado. Isso significa que eles se referem ao estado no momento em que são definidos, que pode ficar obsoleto quando o ouvinte de eventos é acionado.

Por outro lado, o componente Card usa useRef para registrar o ouvinte de eventos, que persiste durante todo o ciclo de vida do componente. Como resultado, a função de ouvinte de evento refere-se ao estado no momento em que o componente foi montado, que está obsoleto.

Solução - Usando a função de atualização de estado

Uma solução é usar um atualizador de estado função que recebe o estado novo como um argumento, em vez de depender do estado obsoleto do escopo envolvente:

const eventListener = () => {
  // Function receives fresh state
  setState(freshState => freshState   1);
};

// Event listener is registered using `useEffect` to ensure it is only registered once
useEffect(() => {
  // Register event listener
  // ...

  // Unregister event listener on component unmount
  return () => {
    // ...
  };
}, []);

Nesse cenário, o ouvinte de evento recebe o estado novo, eliminando o problema com dados obsoletos. No entanto, é importante observar que a função atualizadora de estado pode retornar o mesmo estado para evitar atualizações desnecessárias. Use console.log na função de atualizador de estado para observar as mudanças de estado.

Outras soluções

Formas alternativas de resolver esse problema incluem:

• Mutável Estado: Usando useRef em vez de useState.
• Re-registro manual do ouvinte de eventos: Registrando novamente o ouvinte de eventos sempre que o estado muda.
• Manipulação de eventos integrada: Usando a manipulação de eventos integrada do React em vez de ouvintes de eventos personalizados.