Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

If the component rerenders using same query does an API call to firestore occur?

See original GitHub issue
const [input, setInput] = useState();
  const [debouncedQuery] = useDebouncedCallback(queryBasedOnCustomerName, TYPING_SPEED.AVERAGE, {
    leading: false,
    trailing: true,
  const [value, loading, error] = useCollectionDataOnce(debouncedQuery(input || ''), {
    idField: 'id',

If the above snippet is used in a component whenever it gets rerendered I could see a new API hit being made… Are there any ways to stop or memorize the result of if the query is the same? I couldn’t find any ways in documentation also I tried using debounce and no effect found

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

caleb-harrelsoncommented, Nov 19, 2020

Using a local store of some kind would prevent the delay in having the data, but not the API call itself.

Using useMemo works the vast majority of the time. “Write your code so that it still works without useMemo — and then add it to optimize performance.” <-- that’s exactly what you’d be doing here. If useMemo drops the cache it would do another query to fetch it, but if it has the cache you could avoid the API call. PR #79 memoizes return values, but you might need to pull the code in yourself since it’s been pending for a long time.

I don’t understand the issue you’re raising with offline persistence. It won’t be bothered by the number of queries you make, so long as the total offline cache isn’t exceeded.

chrisbiancacommented, Dec 30, 2020

Closing as this as the memoization changes from #79 will fix any unnecessary re-renders as part of v3

Read more comments on GitHub >

github_iconTop Results From Across the Web

Re-rendering a react component after data is added to my ...
yes the page is opened and tasks that already exist appear...but if the user adds a new one to the database I want...
Read more >
Do I need a state management tool? · Discussion #468 - GitHub
No, reads shouldn't be re-issued. ReactFire caches the active Firestore listeners, so as long as your query doesn't change, it will keep the ......
Read more >
Use the Cloud Firestore REST API - Firebase
When a Cloud Firestore request succeeds, the Cloud Firestore API returns an HTTP 200 OK status code and the requested data. When a...
Read more >
How to use React Hooks with Firebase Firestore
In this case, I am only using Firestore, so an API key, authentication domain, and project ID are all that is required.
Read more >
useFirestoreQuery React Hook - useHooks
Instead of calling Firestore's query.onSnapshot() method you simply pass a query to useFirestoreQuery() and you get back everything you need ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found