In React when using Firebase, should getAuth getStorage getFirestore etc be called once and passed around, or can they be called in each component?

Question

If I need to use the result of const db = getFirestore() or const auth = getAuth(app) etc in multiple components, should I:

1. Rewrite those lines const db = getFirestore() or const auth = getAuth(app) etc in every component whenever I need them, or

2. Call them just one at the top level in the App component, and then pass them to child components as props, to avoid multiple calls?

I feel option 1 is easier to code, but may incur a performance penalty. What is the correct way of doing this in React/Firebase coding?

Answer 1

The getFirestore(...), getAuth(...) and similar calls are all simple local-only calls that initialize some basic objects from the configuration. There is little harm in calling them in multiple places.

That said, I'd recommend passing the app to either all of them or to none of them, unlike what the code in your question does now.

So either get all services from the default app:

const db = getFirestore();
const auth = getAuth();

or get all of them from a specified app:

const db = getFirestore(app);
const auth = getAuth(app);

But not a mix of these.