docs: fix emulator setup example to prevent double-initialization#734
docs: fix emulator setup example to prevent double-initialization#734tyler-reitz wants to merge 3 commits into
Conversation
Calling connect*Emulator() in a React component body causes 'Firestore has already been started' errors on re-renders. Show two correct patterns: module-level initialization (preferred) and a useRef guard for component-level initialization. Fixes FirebaseExtended#459
There was a problem hiding this comment.
Code Review
This pull request updates the documentation in docs/use.md to demonstrate how to safely connect to the Firebase Local Emulator Suite, providing examples for initializing both outside of React and inside a component using a useRef guard. The reviewer pointed out that using useRef inside a component is still prone to double-initialization errors when the component unmounts and remounts, as the Firebase App instance is cached globally while the ref is recreated. They suggested using a module-level WeakSet to track initialized app instances instead.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
…prefer firebaseApp=
Problem
The emulator setup example in use.md called
connect*Emulator()inside a React component body without any guard. This causes the following error on re-renders (React StrictMode, parent re-renders, Next.js page transitions):This is the root cause behind all the workarounds in #459 (
_settingsFrozenchecks,window['_init']flags, etc.) — users were working around bad docs.Fix
Replace the broken component-level example with module-level initialization: create the app and SDK instances outside React, connect emulators there, then pass everything into providers via
firebaseApp=. This guaranteesconnect*Emulator()only runs once.Also adds a note explaining that
firebaseConfig=onFirebaseAppProvideris a convenience shortcut that gives reactfire ownership of the app instance, making emulator setup unnecessarily difficult. PreferfirebaseApp=for anything non-trivial.Fixes #459