diff --git a/compiler/apps/playground/components/Editor/ConfigEditor.tsx b/compiler/apps/playground/components/Editor/ConfigEditor.tsx
index 43b3f1e8a9164..63522987db052 100644
--- a/compiler/apps/playground/components/Editor/ConfigEditor.tsx
+++ b/compiler/apps/playground/components/Editor/ConfigEditor.tsx
@@ -10,14 +10,8 @@ import type {editor} from 'monaco-editor';
 import * as monaco from 'monaco-editor';
 import React, {useState, useCallback} from 'react';
 import {Resizable} from 're-resizable';
-import {useSnackbar} from 'notistack';
 import {useStore, useStoreDispatch} from '../StoreContext';
 import {monacoOptions} from './monacoOptions';
-import {
-  ConfigError,
-  generateOverridePragmaFromConfig,
-  updateSourceWithOverridePragma,
-} from '../../lib/configUtils';
 
 // @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
 import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
@@ -28,61 +22,17 @@ export default function ConfigEditor(): React.ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
   const store = useStore();
   const dispatchStore = useStoreDispatch();
-  const {enqueueSnackbar} = useSnackbar();
 
   const toggleExpanded = useCallback(() => {
     setIsExpanded(prev => !prev);
   }, []);
 
-  const handleApplyConfig: () => Promise<void> = async () => {
-    try {
-      const config = store.config || '';
-
-      if (!config.trim()) {
-        enqueueSnackbar(
-          'Config is empty. Please add configuration options first.',
-          {
-            variant: 'warning',
-          },
-        );
-        return;
-      }
-      const newPragma = await generateOverridePragmaFromConfig(config);
-      const updatedSource = updateSourceWithOverridePragma(
-        store.source,
-        newPragma,
-      );
-
-      dispatchStore({
-        type: 'updateFile',
-        payload: {
-          source: updatedSource,
-          config: config,
-        },
-      });
-    } catch (error) {
-      console.error('Failed to apply config:', error);
-
-      if (error instanceof ConfigError && error.message.trim()) {
-        enqueueSnackbar(error.message, {
-          variant: 'error',
-        });
-      } else {
-        enqueueSnackbar('Unexpected error: failed to apply config.', {
-          variant: 'error',
-        });
-      }
-    }
-  };
-
   const handleChange: (value: string | undefined) => void = value => {
     if (value === undefined) return;
 
-    // Only update the config
     dispatchStore({
-      type: 'updateFile',
+      type: 'updateConfig',
       payload: {
-        source: store.source,
         config: value,
       },
     });
@@ -120,49 +70,40 @@ export default function ConfigEditor(): React.ReactElement {
   return (
     <div className="flex flex-row relative">
       {isExpanded ? (
-        <>
-          <Resizable
-            className="border-r"
-            minWidth={300}
-            maxWidth={600}
-            defaultSize={{width: 350, height: 'auto'}}
-            enable={{right: true}}>
-            <h2
-              title="Minimize config editor"
-              aria-label="Minimize config editor"
-              onClick={toggleExpanded}
-              className="p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 font-light text-secondary hover:text-link">
-              - Config Overrides
-            </h2>
-            <div className="h-[calc(100vh_-_3.5rem_-_4rem)]">
-              <MonacoEditor
-                path={'config.ts'}
-                language={'typescript'}
-                value={store.config}
-                onMount={handleMount}
-                onChange={handleChange}
-                options={{
-                  ...monacoOptions,
-                  lineNumbers: 'off',
-                  folding: false,
-                  renderLineHighlight: 'none',
-                  scrollBeyondLastLine: false,
-                  hideCursorInOverviewRuler: true,
-                  overviewRulerBorder: false,
-                  overviewRulerLanes: 0,
-                  fontSize: 12,
-                }}
-              />
-            </div>
-          </Resizable>
-          <button
-            onClick={handleApplyConfig}
-            title="Apply config overrides to input"
-            aria-label="Apply config overrides to input"
-            className="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-1/2 z-10 w-8 h-8 bg-blue-500 hover:bg-blue-600 text-white rounded-full border-2 border-white shadow-lg flex items-center justify-center text-sm font-medium transition-colors duration-150">
-            →
-          </button>
-        </>
+        <Resizable
+          className="border-r"
+          minWidth={300}
+          maxWidth={600}
+          defaultSize={{width: 350, height: 'auto'}}
+          enable={{right: true}}>
+          <h2
+            title="Minimize config editor"
+            aria-label="Minimize config editor"
+            onClick={toggleExpanded}
+            className="p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 font-light text-secondary hover:text-link">
+            - Config Overrides
+          </h2>
+          <div className="h-[calc(100vh_-_3.5rem_-_4rem)]">
+            <MonacoEditor
+              path={'config.ts'}
+              language={'typescript'}
+              value={store.config}
+              onMount={handleMount}
+              onChange={handleChange}
+              options={{
+                ...monacoOptions,
+                lineNumbers: 'off',
+                folding: false,
+                renderLineHighlight: 'none',
+                scrollBeyondLastLine: false,
+                hideCursorInOverviewRuler: true,
+                overviewRulerBorder: false,
+                overviewRulerLanes: 0,
+                fontSize: 12,
+              }}
+            />
+          </div>
+        </Resizable>
       ) : (
         <div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
           <button
diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx
index 0c12b482a3b7d..d6a2bccc8edef 100644
--- a/compiler/apps/playground/components/Editor/EditorImpl.tsx
+++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx
@@ -22,6 +22,7 @@ import BabelPluginReactCompiler, {
   parsePluginOptions,
   printReactiveFunctionWithOutlined,
   printFunctionWithOutlined,
+  type LoggerEvent,
 } from 'babel-plugin-react-compiler';
 import clsx from 'clsx';
 import invariant from 'invariant';
@@ -46,7 +47,6 @@ import {
   PrintedCompilerPipelineValue,
 } from './Output';
 import {transformFromAstSync} from '@babel/core';
-import {LoggerEvent} from 'babel-plugin-react-compiler/dist/Entrypoint';
 import {useSearchParams} from 'next/navigation';
 
 function parseInput(
@@ -147,6 +147,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
 function compile(
   source: string,
   mode: 'compiler' | 'linter',
+  configOverrides: string,
 ): [CompilerOutput, 'flow' | 'typescript'] {
   const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
   const error = new CompilerError();
@@ -207,7 +208,7 @@ function compile(
         }
       }
     };
-    const parsedOptions = parseConfigPragmaForTests(pragma, {
+    const parsedPragmaOptions = parseConfigPragmaForTests(pragma, {
       compilationMode: 'infer',
       environment:
         mode === 'linter'
@@ -227,10 +228,26 @@ function compile(
               /* use defaults for compiler mode */
             },
     });
+
+    // Parse config overrides from config editor
+    let configOverrideOptions: any = {};
+    const configMatch = configOverrides.match(/^\s*import.*?\n\n\((.*)\)/s);
+    // TODO: initialize store with URL params, not empty store
+    if (configOverrides.trim()) {
+      if (configMatch && configMatch[1]) {
+        const configString = configMatch[1].replace(/satisfies.*$/, '').trim();
+        configOverrideOptions = new Function(`return (${configString})`)();
+      } else {
+        throw new Error('Invalid config overrides');
+      }
+    }
+
     const opts: PluginOptions = parsePluginOptions({
-      ...parsedOptions,
+      ...parsedPragmaOptions,
+      ...configOverrideOptions,
       environment: {
-        ...parsedOptions.environment,
+        ...parsedPragmaOptions.environment,
+        ...configOverrideOptions.environment,
         customHooks: new Map([...COMMON_HOOKS]),
       },
       logger: {
@@ -285,19 +302,14 @@ export default function Editor(): JSX.Element {
   const dispatchStore = useStoreDispatch();
   const {enqueueSnackbar} = useSnackbar();
   const [compilerOutput, language] = useMemo(
-    () => compile(deferredStore.source, 'compiler'),
-    [deferredStore.source],
+    () => compile(deferredStore.source, 'compiler', deferredStore.config),
+    [deferredStore.source, deferredStore.config],
   );
   const [linterOutput] = useMemo(
-    () => compile(deferredStore.source, 'linter'),
-    [deferredStore.source],
+    () => compile(deferredStore.source, 'linter', deferredStore.config),
+    [deferredStore.source, deferredStore.config],
   );
 
-  // TODO: Remove this once the config editor is more stable
-  const searchParams = useSearchParams();
-  const search = searchParams.get('showConfig');
-  const shouldShowConfig = search === 'true';
-
   useMountEffect(() => {
     // Initialize store
     let mountStore: Store;
@@ -339,7 +351,7 @@ export default function Editor(): JSX.Element {
   return (
     <>
       <div className="relative flex basis top-14">
-        {shouldShowConfig && <ConfigEditor />}
+        <ConfigEditor />
         <div className={clsx('relative sm:basis-1/4')}>
           <Input language={language} errors={errors} />
         </div>
diff --git a/compiler/apps/playground/components/Editor/Input.tsx b/compiler/apps/playground/components/Editor/Input.tsx
index 0441f3f9a4be0..f4c64a14a0501 100644
--- a/compiler/apps/playground/components/Editor/Input.tsx
+++ b/compiler/apps/playground/components/Editor/Input.tsx
@@ -17,7 +17,6 @@ import {useStore, useStoreDispatch} from '../StoreContext';
 import {monacoOptions} from './monacoOptions';
 // @ts-expect-error TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
 import React$Types from '../../node_modules/@types/react/index.d.ts';
-import {parseAndFormatConfig} from '../../lib/configUtils.ts';
 
 loader.config({monaco});
 
@@ -83,14 +82,10 @@ export default function Input({errors, language}: Props): JSX.Element {
   const handleChange: (value: string | undefined) => void = async value => {
     if (!value) return;
 
-    // Parse and format the config
-    const config = await parseAndFormatConfig(value);
-
     dispatchStore({
-      type: 'updateFile',
+      type: 'updateSource',
       payload: {
         source: value,
-        config,
       },
     });
   };
diff --git a/compiler/apps/playground/components/StoreContext.tsx b/compiler/apps/playground/components/StoreContext.tsx
index e5f3b23605831..52de6c0fa3e4c 100644
--- a/compiler/apps/playground/components/StoreContext.tsx
+++ b/compiler/apps/playground/components/StoreContext.tsx
@@ -53,9 +53,14 @@ type ReducerAction =
       };
     }
   | {
-      type: 'updateFile';
+      type: 'updateSource';
       payload: {
         source: string;
+      };
+    }
+  | {
+      type: 'updateConfig';
+      payload: {
         config: string;
       };
     }
@@ -69,11 +74,18 @@ function storeReducer(store: Store, action: ReducerAction): Store {
       const newStore = action.payload.store;
       return newStore;
     }
-    case 'updateFile': {
-      const {source, config} = action.payload;
+    case 'updateSource': {
+      const source = action.payload.source;
       const newStore = {
         ...store,
         source,
+      };
+      return newStore;
+    }
+    case 'updateConfig': {
+      const config = action.payload.config;
+      const newStore = {
+        ...store,
         config,
       };
       return newStore;
diff --git a/compiler/apps/playground/lib/configUtils.ts b/compiler/apps/playground/lib/configUtils.ts
deleted file mode 100644
index 108ba759d1384..0000000000000
--- a/compiler/apps/playground/lib/configUtils.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import parserBabel from 'prettier/plugins/babel';
-import prettierPluginEstree from 'prettier/plugins/estree';
-import * as prettier from 'prettier/standalone';
-import {parsePluginOptions} from 'babel-plugin-react-compiler';
-import {parseConfigPragmaAsString} from '../../../packages/babel-plugin-react-compiler/src/Utils/TestUtils';
-
-export class ConfigError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = 'ConfigError';
-  }
-}
-/**
- * Parse config from pragma and format it with prettier
- */
-export async function parseAndFormatConfig(source: string): Promise<string> {
-  const pragma = source.substring(0, source.indexOf('\n'));
-  let configString = parseConfigPragmaAsString(pragma);
-  if (configString !== '') {
-    configString = `\
-    import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
-
-    (${configString} satisfies Partial<PluginOptions>)`;
-  }
-
-  try {
-    const formatted = await prettier.format(configString, {
-      semi: true,
-      parser: 'babel-ts',
-      plugins: [parserBabel, prettierPluginEstree],
-    });
-    return formatted;
-  } catch (error) {
-    console.error('Error formatting config:', error);
-    return ''; // Return empty string if not valid for now
-  }
-}
-
-function extractCurlyBracesContent(input: string): string {
-  const startIndex = input.indexOf('({') + 1;
-  const endIndex = input.lastIndexOf('}');
-  if (startIndex === -1 || endIndex === -1 || endIndex <= startIndex) {
-    throw new Error('No outer curly braces found in input.');
-  }
-  return input.slice(startIndex, endIndex + 1);
-}
-
-function cleanContent(content: string): string {
-  return content
-    .replace(/[\r\n]+/g, ' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-}
-
-/**
- * Validate that a config string can be parsed as a valid PluginOptions object
- * Throws an error if validation fails.
- */
-function validateConfigAsPluginOptions(configString: string): void {
-  // Validate that config can be parse as JS obj
-  let parsedConfig: unknown;
-  try {
-    parsedConfig = new Function(`return (${configString})`)();
-  } catch (_) {
-    throw new ConfigError('Config has invalid syntax.');
-  }
-
-  // Validate against PluginOptions schema
-  try {
-    parsePluginOptions(parsedConfig);
-  } catch (_) {
-    throw new ConfigError('Config does not match the expected schema.');
-  }
-}
-
-/**
- * Generate a the override pragma comment from a formatted config object string
- */
-export async function generateOverridePragmaFromConfig(
-  formattedConfigString: string,
-): Promise<string> {
-  const content = extractCurlyBracesContent(formattedConfigString);
-  const cleanConfig = cleanContent(content);
-
-  validateConfigAsPluginOptions(cleanConfig);
-
-  // Format the config to ensure it's valid
-  await prettier.format(`(${cleanConfig})`, {
-    semi: false,
-    parser: 'babel-ts',
-    plugins: [parserBabel, prettierPluginEstree],
-  });
-
-  return `// @OVERRIDE:${cleanConfig}`;
-}
-
-/**
- * Update the override pragma comment in source code.
- */
-export function updateSourceWithOverridePragma(
-  source: string,
-  newPragma: string,
-): string {
-  const firstLineEnd = source.indexOf('\n');
-  const firstLine = source.substring(0, firstLineEnd);
-
-  const pragmaRegex = /^\/\/\s*@/;
-  if (firstLineEnd !== -1 && pragmaRegex.test(firstLine.trim())) {
-    return newPragma + source.substring(firstLineEnd);
-  } else {
-    return newPragma + '\n' + source;
-  }
-}
diff --git a/compiler/apps/playground/lib/defaultStore.ts b/compiler/apps/playground/lib/defaultStore.ts
index 77f28aa7e1a93..17a80094a6628 100644
--- a/compiler/apps/playground/lib/defaultStore.ts
+++ b/compiler/apps/playground/lib/defaultStore.ts
@@ -17,22 +17,9 @@ export const defaultConfig = `\
 import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
 
 ({
-  compilationMode: 'infer',
-  panicThreshold: 'none',
-  environment: {},
-  logger: null,
-  gating: null,
-  noEmit: false,
-  dynamicGating: null,
-  eslintSuppressionRules: null,
-  flowSuppressions: true,
-  ignoreUseNoForget: false,
-  sources: filename => {
-    return filename.indexOf('node_modules') === -1;
-  },
-  enableReanimatedCheck: true,
-  customOptOutDirectives: null,
-  target: '19',
+  environment: {
+    enableResetCacheOnSourceFileChanges: false
+  }
 } satisfies Partial<PluginOptions>);`;
 
 export const defaultStore: Store = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts
index 1c3552d44bf03..cfa8cf2910fe0 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts
@@ -188,11 +188,6 @@ export function parseConfigPragmaForTests(
     environment?: PartialEnvironmentConfig;
   },
 ): PluginOptions {
-  const overridePragma = parseConfigPragmaAsString(pragma);
-  if (overridePragma !== '') {
-    return parseConfigStringAsJS(overridePragma, defaults);
-  }
-
   const environment = parseConfigPragmaEnvironmentForTest(
     pragma,
     defaults.environment ?? {},
@@ -228,100 +223,3 @@ export function parseConfigPragmaForTests(
   }
   return parsePluginOptions(options);
 }
-
-export function parseConfigPragmaAsString(pragma: string): string {
-  // Check if it's in JS override format
-  for (const {key, value: val} of splitPragma(pragma)) {
-    if (key === 'OVERRIDE' && val != null) {
-      return val;
-    }
-  }
-  return '';
-}
-
-function parseConfigStringAsJS(
-  configString: string,
-  defaults: {
-    compilationMode: CompilationMode;
-    environment?: PartialEnvironmentConfig;
-  },
-): PluginOptions {
-  let parsedConfig: any;
-  try {
-    // Parse the JavaScript object literal
-    parsedConfig = new Function(`return ${configString}`)();
-  } catch (error) {
-    CompilerError.invariant(false, {
-      reason: 'Failed to parse config pragma as JavaScript object',
-      description: `Could not parse: ${configString}. Error: ${error}`,
-      details: [
-        {
-          kind: 'error',
-          loc: null,
-          message: null,
-        },
-      ],
-      suggestions: null,
-    });
-  }
-
-  const environment = parseConfigPragmaEnvironmentForTest(
-    '',
-    defaults.environment ?? {},
-  );
-
-  const options: Record<keyof PluginOptions, unknown> = {
-    ...defaultOptions,
-    panicThreshold: 'all_errors',
-    compilationMode: defaults.compilationMode,
-    environment,
-  };
-
-  // Apply parsed config, merging environment if it exists
-  if (parsedConfig.environment) {
-    const mergedEnvironment = {
-      ...(options.environment as Record<string, unknown>),
-      ...parsedConfig.environment,
-    };
-
-    // Validate environment config
-    const validatedEnvironment =
-      EnvironmentConfigSchema.safeParse(mergedEnvironment);
-    if (!validatedEnvironment.success) {
-      CompilerError.invariant(false, {
-        reason: 'Invalid environment configuration in config pragma',
-        description: `${fromZodError(validatedEnvironment.error)}`,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
-        suggestions: null,
-      });
-    }
-
-    options.environment = validatedEnvironment.data;
-  }
-
-  // Apply other config options
-  for (const [key, value] of Object.entries(parsedConfig)) {
-    if (key === 'environment') {
-      continue;
-    }
-
-    if (hasOwnProperty(defaultOptions, key)) {
-      if (key === 'target' && value === 'donotuse_meta_internal') {
-        options[key] = {
-          kind: value,
-          runtimeModule: 'react',
-        };
-      } else {
-        options[key] = value;
-      }
-    }
-  }
-
-  return parsePluginOptions(options);
-}
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index fad4622acc15b..3b60d5ae093e4 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -2489,7 +2489,7 @@ describe('Store', () => {
       withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await act(() => render(<React.Fragment />));
       });
-      expect(store).toMatchInlineSnapshot(`[root]`);
+      expect(store).toMatchInlineSnapshot(``);
       expect(store.componentWithErrorCount).toBe(0);
       expect(store.componentWithWarningCount).toBe(0);
     });
@@ -3083,6 +3083,9 @@ describe('Store', () => {
 
   it('should handle an empty root', async () => {
     await actAsync(() => render(null));
+    expect(store).toMatchInlineSnapshot(``);
+
+    await actAsync(() => render(<span />));
     expect(store).toMatchInlineSnapshot(`[root]`);
   });
 });
diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index 12e2ce31fb16f..aee89e8ca2c54 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -4310,7 +4310,9 @@ export function attach(
         virtualLevel + 1,
       );
       if ((updateFlags & ShouldResetChildren) !== NoUpdate) {
-        recordResetChildren(virtualInstance);
+        if (!isInDisconnectedSubtree) {
+          recordResetChildren(virtualInstance);
+        }
         updateFlags &= ~ShouldResetChildren;
       }
       removePreviousSuspendedBy(
@@ -5097,7 +5099,9 @@ export function attach(
         // We need to crawl the subtree for closest non-filtered Fibers
         // so that we can display them in a flat children set.
         if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {
-          recordResetChildren(fiberInstance);
+          if (!nextIsHidden && !isInDisconnectedSubtree) {
+            recordResetChildren(fiberInstance);
+          }
 
           // We've handled the child order change for this Fiber.
           // Since it's included, there's no need to invalidate parent child order.
@@ -5318,12 +5322,12 @@ export function attach(
     root: FiberRoot,
     priorityLevel: void | number,
   ) {
-    const current = root.current;
+    const nextFiber = root.current;
 
     let prevFiber: null | Fiber = null;
     let rootInstance = rootToFiberInstanceMap.get(root);
     if (!rootInstance) {
-      rootInstance = createFiberInstance(current);
+      rootInstance = createFiberInstance(nextFiber);
       rootToFiberInstanceMap.set(root, rootInstance);
       idToDevToolsInstanceMap.set(rootInstance.id, rootInstance);
     } else {
@@ -5362,30 +5366,25 @@ export function attach(
       };
     }
 
-    if (prevFiber !== null) {
-      // TODO: relying on this seems a bit fishy.
-      const wasMounted =
-        prevFiber.memoizedState != null &&
-        prevFiber.memoizedState.element != null;
-      const isMounted =
-        current.memoizedState != null && current.memoizedState.element != null;
-      if (!wasMounted && isMounted) {
-        // Mount a new root.
-        setRootPseudoKey(currentRoot.id, current);
-        mountFiberRecursively(current, false);
-      } else if (wasMounted && isMounted) {
-        // Update an existing root.
-        updateFiberRecursively(rootInstance, current, prevFiber, false);
-      } else if (wasMounted && !isMounted) {
-        // Unmount an existing root.
-        unmountInstanceRecursively(rootInstance);
-        removeRootPseudoKey(currentRoot.id);
-        rootToFiberInstanceMap.delete(root);
-      }
-    } else {
+    const nextIsMounted = nextFiber.child !== null;
+    const prevWasMounted = prevFiber !== null && prevFiber.child !== null;
+    if (!prevWasMounted && nextIsMounted) {
       // Mount a new root.
-      setRootPseudoKey(currentRoot.id, current);
-      mountFiberRecursively(current, false);
+      setRootPseudoKey(currentRoot.id, nextFiber);
+      mountFiberRecursively(nextFiber, false);
+    } else if (prevWasMounted && nextIsMounted) {
+      if (prevFiber === null) {
+        throw new Error(
+          'Expected a previous Fiber when updating an existing root.',
+        );
+      }
+      // Update an existing root.
+      updateFiberRecursively(rootInstance, nextFiber, prevFiber, false);
+    } else if (prevWasMounted && !nextIsMounted) {
+      // Unmount an existing root.
+      unmountInstanceRecursively(rootInstance);
+      removeRootPseudoKey(currentRoot.id);
+      rootToFiberInstanceMap.delete(root);
     }
 
     if (isProfiling && isProfilingSupported) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
index dc18b631ec31a..d979ec254ba4d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -14,8 +14,17 @@ import styles from './Badge.css';
 type Props = {
   className?: string,
   children: React$Node,
+  ...
 };
 
-export default function Badge({className = '', children}: Props): React.Node {
-  return <div className={`${styles.Badge} ${className}`}>{children}</div>;
+export default function Badge({
+  className = '',
+  children,
+  ...props
+}: Props): React.Node {
+  return (
+    <div {...props} className={`${styles.Badge} ${className}`}>
+      {children}
+    </div>
+  );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index 00fae0951fb1e..35f0d077c7349 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -24,6 +24,7 @@ import type {Element as ElementType} from 'react-devtools-shared/src/frontend/ty
 import styles from './Element.css';
 import Icon from '../Icon';
 import {useChangeOwnerAction} from './OwnersListContext';
+import Tooltip from './reach-ui/tooltip';
 
 type Props = {
   data: ItemData,
@@ -231,15 +232,16 @@ export default function Element({data, index, style}: Props): React.Node {
           />
         )}
         {showStrictModeBadge && (
-          <Icon
-            className={
-              isSelected && treeFocused
-                ? styles.StrictModeContrast
-                : styles.StrictMode
-            }
-            title="This component is not running in StrictMode."
-            type="strict-mode-non-compliant"
-          />
+          <Tooltip label="This component is not running in StrictMode.">
+            <Icon
+              className={
+                isSelected && treeFocused
+                  ? styles.StrictModeContrast
+                  : styles.StrictMode
+              }
+              type="strict-mode-non-compliant"
+            />
+          </Tooltip>
         )}
       </div>
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css
index e80f37083345e..415f8e96fd759 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css
@@ -11,11 +11,3 @@
   position: absolute;
   right: 0.25em;
 }
-
-.ForgetToggle {
-  display: flex;
-}
-
-.ForgetToggle > span { /* targets .ToggleContent */
-  padding: 0;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js
index 00b4f0db13f9b..5048f3085f710 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import Badge from './Badge';
 import IndexableDisplayName from './IndexableDisplayName';
-import Toggle from '../Toggle';
+import Tooltip from './reach-ui/tooltip';
 
 import styles from './ForgetBadge.css';
 
@@ -40,12 +40,11 @@ export default function ForgetBadge(props: Props): React.Node {
     'Memo'
   );
 
-  const onChange = () => {};
   const title =
     '✨ This component has been auto-memoized by the React Compiler.';
   return (
-    <Toggle onChange={onChange} className={styles.ForgetToggle} title={title}>
+    <Tooltip label={title}>
       <Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>
-    </Toggle>
+    </Tooltip>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 200f78586c51a..5596257fa5df5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -29,6 +29,7 @@ import InspectedElementViewSourceButton from './InspectedElementViewSourceButton
 import useEditorURL from '../useEditorURL';
 
 import styles from './InspectedElement.css';
+import Tooltip from './reach-ui/tooltip';
 
 export type Props = {};
 
@@ -192,14 +193,15 @@ export default function InspectedElementWrapper(_: Props): React.Node {
   let strictModeBadge = null;
   if (element.isStrictModeNonCompliant) {
     strictModeBadge = (
-      <a
-        className={styles.StrictModeNonCompliant}
-        href="https://react.dev/reference/react/StrictMode"
-        rel="noopener noreferrer"
-        target="_blank"
-        title="This component is not running in StrictMode. Click to learn more.">
-        <Icon type="strict-mode-non-compliant" />
-      </a>
+      <Tooltip label="This component is not running in StrictMode. Click to learn more.">
+        <a
+          className={styles.StrictModeNonCompliant}
+          href="https://react.dev/reference/react/StrictMode"
+          rel="noopener noreferrer"
+          target="_blank">
+          <Icon type="strict-mode-non-compliant" />
+        </a>
+      </Tooltip>
     );
   }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.css b/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.css
index 7188a53743432..cebc617e69cfc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.css
@@ -1,11 +1,3 @@
-.Toggle {
-  display: flex;
-}
-
-.Toggle > span { /* targets .ToggleContent */
-  padding: 0;
-}
-
 .Badge {
   cursor: help;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js
index 118255b536a09..c092891ec9dd3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 
 import Badge from './Badge';
-import Toggle from '../Toggle';
+import Tooltip from './reach-ui/tooltip';
 
 import styles from './NativeTagBadge.css';
 
@@ -18,14 +18,13 @@ type Props = {
   nativeTag: number,
 };
 
-const noop = () => {};
 const title =
   'Unique identifier for the corresponding native component. React Native only.';
 
 export default function NativeTagBadge({nativeTag}: Props): React.Node {
   return (
-    <Toggle onChange={noop} className={styles.Toggle} title={title}>
+    <Tooltip label={title}>
       <Badge className={styles.Badge}>Tag {nativeTag}</Badge>
-    </Toggle>
+    </Tooltip>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
index 360a6c232b072..f8dc401365dce 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -63,8 +63,7 @@ export default function ReportNewIssue({
         className={styles.ReportLink}
         href={bugURL}
         rel="noopener noreferrer"
-        target="_blank"
-        title="Report bug">
+        target="_blank">
         Report this issue
       </a>
       <div className={styles.ReproSteps}>
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
index 1e04c304a743d..c72edc06f1c9a 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
@@ -25,8 +25,7 @@ export default function WorkplaceGroup(): React.Node {
         className={styles.ReportLink}
         href={REACT_DEVTOOLS_WORKPLACE_URL}
         rel="noopener noreferrer"
-        target="_blank"
-        title="Report bug">
+        target="_blank">
         Report this on Workplace
       </a>
       <div className={styles.FacebookOnly}>(Facebook employees only.)</div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index f65f331a12d44..f49bb4fd0380c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -33,12 +33,14 @@ type Props = {
   className?: string,
   title?: string,
   type: IconType,
+  ...
 };
 
 export default function Icon({
   className = '',
   title = '',
   type,
+  ...props
 }: Props): React.Node {
   let pathData = null;
   let viewBox = '0 0 24 24';
@@ -102,6 +104,7 @@ export default function Icon({
 
   return (
     <svg
+      {...props}
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.Icon} ${className}`}
       width="24"
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 440748ca2f440..10edd1e5c311d 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -2384,6 +2384,11 @@ function visitAsyncNode(
               // Promise that was ultimately awaited by the user space await.
               serializeIONode(request, ioNode, awaited.promise);
 
+              // Ensure the owner is already outlined.
+              if (node.owner != null) {
+                outlineComponentInfo(request, node.owner);
+              }
+
               // We log the environment at the time when the last promise pigned ping which may
               // be later than what the environment was when we actually started awaiting.
               const env = (0, request.environmentName)();
@@ -5133,6 +5138,10 @@ function forwardDebugInfo(
         } else {
           // Outline the IO info in case the same I/O is awaited in more than one place.
           outlineIOInfo(request, ioInfo);
+          // Ensure the owner is already outlined.
+          if (info.owner != null) {
+            outlineComponentInfo(request, info.owner);
+          }
           // We can't serialize the ConsoleTask/Error objects so we need to omit them before serializing.
           let debugStack;
           if (info.stack == null && info.debugStack != null) {