Skip to content

docs: fix emulator setup example to prevent double-initialization#734

Open
tyler-reitz wants to merge 3 commits into
FirebaseExtended:mainfrom
tyler-reitz:fix/emulator-docs
Open

docs: fix emulator setup example to prevent double-initialization#734
tyler-reitz wants to merge 3 commits into
FirebaseExtended:mainfrom
tyler-reitz:fix/emulator-docs

Conversation

@tyler-reitz

@tyler-reitz tyler-reitz commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

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):

FirebaseError: Firestore has already been started and its settings can no longer be changed. You can only modify settings before calling any other methods on a Firestore object.

This is the root cause behind all the workarounds in #459 (_settingsFrozen checks, 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 guarantees connect*Emulator() only runs once.

Also adds a note explaining that firebaseConfig= on FirebaseAppProvider is a convenience shortcut that gives reactfire ownership of the app instance, making emulator setup unnecessarily difficult. Prefer firebaseApp= for anything non-trivial.

Fixes #459

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

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread docs/use.md Outdated
@tyler-reitz tyler-reitz marked this pull request as draft July 10, 2026 21:06
@tyler-reitz tyler-reitz marked this pull request as ready for review July 14, 2026 20:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Can't connect to emulators when following docs

2 participants