[DevTools] Apply component filters on initial load

[eps1lon]

The extension wasn't using the persistested filters until you made changes in the frontend. Now we're using the same approach as the hook settings which means the timings works out to be before React renders. That way we don't have to immediately throw out the devtools backend tree like we usually do when updating component filters.

The alternative would be to use the savedPreferences messages like react-devtools-inline does. react-devtools-inline approach is less complex but would come with two downsides:

• it comes in while we're profiling when we don't support updating filters
• it comes in after the initial mount i.e. we always reconcile the full tree twice on initial load

Storing it in the backend means data might desync but that complexity is worth avoiding the two issues above.
If we get synchronization issues in practice we can revisit.

This removes reliance on __REACT_DEVTOOLS_COMPONENT_FILTERS__ in favor of passing a sync value or Promise to initialize instead.

Test plan

• host Components are unfiltered on reload if no Components are filtered
• reload&profile shows host Components and doesn't throw

CleanShot.2026-01-21.at.19.40.04.mp4

[hoxyq]

Do we still need to save filters in local storage? Maybe it can be removed after these changes?

react/packages/react-devtools-shared/src/utils.js

Lines 489 to 496 in 3031aae

	export function setSavedComponentFilters(
	componentFilters: Array<ComponentFilter>,
	): void {
	localStorageSetItem(
	LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
	JSON.stringify(persistableComponentFilters(componentFilters)),
	);
	}

[hoxyq]

This shouldn't work?

initialize(...) receives hook settings as a first argument:

react/packages/react-devtools-core/src/backend.js

Lines 63 to 72 in 3031aae

	export function initialize(
	maybeSettingsOrSettingsPromise?:
	| DevToolsHookSettings
	| Promise<DevToolsHookSettings>,
	shouldStartProfilingNow: boolean = false,
	profilingSettings?: ProfilingSettings,
	maybeComponentFiltersOrComponentFiltersPromise?:
	| Array<ComponentFilter>
	| Promise<Array<ComponentFilter>>,
	) {

[hoxyq]

You can test standalone in Safari, by opening fixtures/devtools/standalone/index.html.

[eps1lon]

Fixed in 43a0ec0 (this PR)

[eps1lon]

Do we still need to save filters in local storage? Maybe it can be removed after these changes?

It's relevant for the versions that don't have access to chrome.storage.local I believe.