3

Nesta resposta do SOen, utiliza-se um useEffect com duas arrow functions seguidas. Assim:

useEffect(() => () => {
  window.removeEventListener('resize', compareSize);
}, []);

Gostaria de saber porque a dupla arrow function está sendo utilizada ali em cima. Qual a diferença entre um useEffect com somente uma arrow function para um useEffect com duas arrow functions (conforme o exemplo acima)?

Por exemplo, este:

useEffect(() => {
  compareSize();
  window.addEventListener('resize', compareSize);
}, []);

1 Resposta 1

2

Sabe-se que funções retornadas pela função que se passa ao useEffect são utilizadas pelo React como o cleanup effect, ou seja, será executada quando o componente for desmontado.

Portanto, fazer:

// Este `useEffect` só executa código em cleanup
useEffect(() => () => {
  window.removeEventListener('resize', compareSize);
});

É o mesmo que isto:

// Este `useEffect` só executa código em cleanup
useEffect(() => {
  return () => {
    window.removeEventListener('resize', compareSize);
  };
});

Dessarte, os dois useEffects da pergunta podem ser "fundidos" em um só, assim:

useEffect(() => {
  compareSize();
  window.addEventListener('resize', compareSize);
  
  // Efeito de cleanup:
  return () => {
    window.removeEventListener('resize', compareSize);
  };
}, []);

Para entender melhor a sintaxe, veja o que são arrow functions. Sobre os efeitos de cleanup e useEffect no geral, referir à documentação do React.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .