Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

useFirestoreCollection triggers a double render

Aberta
#484 4 comentários 2 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript, react
Domínio
database, frontend

Direção de pesquisa

Comece reproduzindo o comportamento com o caso de teste useFirestoreCollection e compare-o com o comportamento semelhante de useUser. Inspecione os pontos de entrada desses hooks para determinar por que buscar com Suspense faz com que console.log seja executado duas vezes. O trabalho estará concluído quando a busca de dados produzir uma renderização, enquanto as renderizações posteriores ocorrerem apenas quando a collection for alterada.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

v5

Hi,

Seems like useFirestoreCollection always triggers unnecessary render when fetching data (suspense is on). Similar behavior is also the case for useUser.
There's a chance I'm simply using the API wrong, so please advise if so :)

Version info

React: 17.0.2

Firebase: 9.1.3

ReactFire: 4.2.0

Test case
  const q = /* whatever query */;
  const queryResults = useFirestoreCollection(q);
  console.log(queryResults);
Expected behavior

console.log is called once.

Actual behavior

console.log is called twice.

Ultimately, what I'm trying to achieve is a code similar to the one below

const queryResults = useFirestoreCollection(query);
return queryResults.data.docs.map((d) => /* render */);

that renders only once when the data is fetched (and then only when there're changes in the collection).

Linguagem predominante
TypeScript
Estrelas
3.6k
Forks
403
Merge médio
5d 1h
PRs com merge (30d)
10

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de FirebaseExtended/reactfire

Todas as issues de FirebaseExtended/reactfire

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.