1

Conforme código abaixo, eu preciso chamar uma função sempre que inView for verdadeiro, mas usando useEffect e useCallback listando as dependências, eu causo um loop infinito. As únicas formas que consegui evitar foram sem listar as dependências, mas eu recebo um warning avisando que tenho que listá-las. Tentei apenas com o useEffect, mas o resultado é o mesmo, listando as dependências, eu tenho problema com os loops. Segue o código:

    import { useEffect, useCallback } from "react";
    import { useInView } from "react-intersection-observer";
    
    export const useLazyLoader = (onEnterView: () => void) => {
      const [ref, inView] = useInView({
        triggerOnce: true,
        rootMargin: "-200px",
      });
    
      const innerEnterView = useCallback(() => {
        onEnterView();
      }, [onEnterView]);
    
      useEffect(() => {
        inView && innerEnterView();
      }, [inView, innerEnterView]);
      return ref;
    };

Nesse exemplo, se eu remover qualquer uma das dependências pra tentar evitar o problema, eu acabo recebendo o warning como esse:

Line 16:6:  React Hook useEffect has a missing dependency: 'innerEnterView'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
1
  • Difícil saber parece que a função está no loop dentro do useEffect
    – novic
    28/09/2020 às 18:05

1 Resposta 1

1

Sobre o useCallback, a própria documentação diz que:

Isto é útil quando utilizamos callbacks a fim de otimizar componentes filhos

mas o callback não está sendo passado para um componente filho. Então o uso correto dela seria que a propriedade onEnterView já seja recebida como um callback.

1
  • Desculpe pela demora, eu consegui resolver encapsulando o onEnderView em um useCallback antes de passar para o hook 1/10/2020 às 17:57

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 .