When using Firebase in React, should getAuth getStorage getFirestore etc. be called once and passed or can they be called in every component?

Question

If I need the result of using constdb=getFirestore() or constauth=getAuth(app) etc. in multiple components I should: rewrite these lines in each component whenever I need constdb=getFirestore() or constauth =getAuth(app) etc. or just call them at the top level of the App component and pass them as props to child components to avoid multiple calls? I feel option 1 is easier to code, but may result in a performance penalty. exist

P粉893457026 · Answer

getFirestore(...), getAuth(...) and similar calls are simple local calls that initialize some basic objects from the configuration. There's no harm in calling them in multiple places.

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

So, either get all services from the default application:

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

or Get all content from the specified application:

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

But not a mix of these.