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

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

[caleb-harrelson]

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.

[chrisbianca]

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