[Dúvida] Erro componente ListaLivros

No código, vc ta chamando filtroDeLivrosVar fora do useEffect, entao ele vai ser executado em toda renderização do componente, fazendo com q haja uma atualização constante e causando o loop infinito;

vc tem de mover a chamada de filtroDeLivrosVar p/ dentro de um useEffect, garantindo que ela seja executada apenas quando a categoria mudar:

import React, { useState, useEffect } from 'react';
import { useReactiveVar } from '@apollo/client';
import { filtroDeLivrosVar, livrosVar } from './path/to/your/vars';
import AbCampoTexto from './path/to/AbCampoTexto';
import CardLivro from './path/to/CardLivro';
import useLivros from './path/to/useLivros';

interface ListaLivrosProps {
  categoria: ICategoria;
}

const ListaLivros = ({ categoria }: ListaLivrosProps) => {
  const [busca, setBusca] = useState("");

  useEffect(() => {
    filtroDeLivrosVar({
      ...filtroDeLivrosVar(),
      titulo: busca.length >= 3 ? busca : "",
    });
  }, [busca]);

  useEffect(() => {
    filtroDeLivrosVar({
      ...filtroDeLivrosVar(),
      categoria,
    });
  }, [categoria]);

  const livros = useReactiveVar(livrosVar);
  useLivros();

  return (
    <section>
      <form style={{ maxWidth: "80%", margin: "0 auto", textAlign: "center" }}>
        <AbCampoTexto
          value={busca}
          onChange={(e) => setBusca(e.target.value)}
          placeholder="Digite o título do livro"
        />
      </form>
      <div className="livros">
        {livros.map((livro) => (
          <CardLivro livro={livro} key={livro.id} />
        ))}
      </div>
    </section>
  );
};

export default ListaLivros;

Perfeito! Te agradeço muito era isso mesmo. Como no código do professor ele não colocou dentro do useEffect, realmente fiquei na dúvida como seria o adequado para resolver, mas imagino que acabou passando despercebido esse erro.

Obrigadaa!