Avoiding repetitive calls when creating reactfire hooks

Question

When initializing a component using reactfire, each time I add a reactfire hook (e.g. useFirestoreDocData), it triggers a re-render and therefore repeats all previous initialization. For example:

const MyComponent = props => {
  console.log(1);
  const firestore = useFirestore();
  console.log(2);
  const ref = firestore.doc('count/counter');
  console.log(3);
  const { value } = useFirestoreDocDataOnce(ref);
  console.log(4);
  ...
  return <span>{value}</span>;
};

will output:

1
1
2
3
1
2
3
4

This seems wasteful, is there a way to avoid this?

This is particularly problematic when I need the result of one reactfire hook to create another (e.g. retrieve data from one document to determine which other document to read) and it duplicates the server calls.

Answer 1

See React's documentation of Suspense. Particulary that part: Approach 3: Render-as-You-Fetch (using Suspense)

Reactfire uses this mechanics. It is not supposed to fetch more than one time for each call even if the line is executed more than once. The mechanics behind "understand" that the fetch is already done and will start the next one.

In your case, react try to render your component, see it needs to fetch, stop rendering and show suspense's fallback while fetching. When fetch is done it retry to render your component and as the fetch is completed it will render completely.

You can confirm in your network tab that each calls is done only once.

I hope I'm clear, please don't hesitate to ask for more details if i'm not.