will cause the placeholder to not\n         \/\/ show within the <textarea> until it has been focused and blurred again.\n         \/\/ https:\/\/github.com\/facebook\/react\/issues\/6731#issuecomment-254874553\n-        const canSetTextContent = tag !== 'textarea' || nextProp !== '';\n+        const canSetTextContent =\n+          (!enableHostSingletons || tag !== 'body') &&\n+          (tag !== 'textarea' || nextProp !== '');\n         if (canSetTextContent) {\n           setTextContent(domElement, nextProp);\n         }\n       } else if (typeof nextProp === 'number') {\n-        setTextContent(domElement, '' + nextProp);\n+        const canSetTextContent = !enableHostSingletons || tag !== 'body';\n+        if (canSetTextContent) {\n+          setTextContent(domElement, '' + nextProp);\n+        }\n       }\n     } else if (\n       propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||\ndiff --git a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponentTree.js b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponentTree.js\nindex 5c45949f97..f3f9e122c2 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponentTree.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponentTree.js\n@@ -25,6 +25,7 @@ import type {\n import {\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n   HostRoot,\n   SuspenseComponent,\n@@ -32,7 +33,11 @@ import {\n \n import {getParentSuspenseInstance} from '.\/ReactDOMHostConfig';\n \n-import {enableScopeAPI, enableFloat} from 'shared\/ReactFeatureFlags';\n+import {\n+  enableScopeAPI,\n+  enableFloat,\n+  enableHostSingletons,\n+} from 'shared\/ReactFeatureFlags';\n \n const randomKey = Math.random()\n   .toString(36)\n@@ -169,12 +174,14 @@ export function getInstanceFromNode(node: Node): Fiber | null {\n     (node: any)[internalInstanceKey] ||\n     (node: any)[internalContainerInstanceKey];\n   if (inst) {\n+    const tag = inst.tag;\n     if (\n-      inst.tag === HostComponent ||\n-      inst.tag === HostText ||\n-      inst.tag === SuspenseComponent ||\n-      inst.tag === HostRoot ||\n-      (enableFloat ? inst.tag === HostResource : false)\n+      tag === HostComponent ||\n+      tag === HostText ||\n+      tag === SuspenseComponent ||\n+      (enableFloat ? tag === HostResource : false) ||\n+      (enableHostSingletons ? tag === HostSingleton : false) ||\n+      tag === HostRoot\n     ) {\n       return inst;\n     } else {\n@@ -189,10 +196,12 @@ export function getInstanceFromNode(node: Node): Fiber | null {\n  * DOM node.\n  *\/\n export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {\n+  const tag = inst.tag;\n   if (\n-    inst.tag === HostComponent ||\n-    inst.tag === HostText ||\n-    (enableFloat ? inst.tag === HostResource : false)\n+    tag === HostComponent ||\n+    (enableFloat ? tag === HostResource : false) ||\n+    (enableHostSingletons ? tag === HostSingleton : false) ||\n+    tag === HostText\n   ) {\n     \/\/ In Fiber this, is just the state node right now. We assume it will be\n     \/\/ a host component or host text.\ndiff --git a\/packages\/react-dom-bindings\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom-bindings\/src\/client\/ReactDOMHostConfig.js\nindex 780fb59e57..d5958401eb 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ReactDOMHostConfig.js\n@@ -25,7 +25,8 @@ import {\n   getInstanceFromNode as getInstanceFromNodeDOMTree,\n   isContainerMarkedAsRoot,\n } from '.\/ReactDOMComponentTree';\n-export {detachDeletedInstance} from '.\/ReactDOMComponentTree';\n+import {detachDeletedInstance} from '.\/ReactDOMComponentTree';\n+export {detachDeletedInstance};\n import {hasRole} from '.\/DOMAccessibilityRoles';\n import {\n   createElement,\n@@ -41,6 +42,7 @@ import {\n   warnForDeletedHydratableText,\n   warnForInsertedHydratedElement,\n   warnForInsertedHydratedText,\n+  getOwnerDocumentFromRootContainer,\n } from '.\/ReactDOMComponent';\n import {getSelectionInformation, restoreSelection} from '.\/ReactInputSelection';\n import setTextContent from '.\/setTextContent';\n@@ -66,11 +68,13 @@ import {\n   enableCreateEventHandleAPI,\n   enableScopeAPI,\n   enableFloat,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n import {\n   HostComponent,\n   HostResource,\n   HostText,\n+  HostSingleton,\n } from 'react-reconciler\/src\/ReactWorkTags';\n import {listenToAllSupportedEvents} from '..\/events\/DOMPluginEventSystem';\n \n@@ -393,6 +397,33 @@ const localRequestAnimationFrame =\n   typeof requestAnimationFrame === 'function'\n     ? requestAnimationFrame\n     : scheduleTimeout;\n+\n+export function getInstanceFromNode(node: HTMLElement): null | Object {\n+  return getClosestInstanceFromNode(node) || null;\n+}\n+\n+export function preparePortalMount(portalInstance: Instance): void {\n+  listenToAllSupportedEvents(portalInstance);\n+}\n+\n+export function prepareScopeUpdate(\n+  scopeInstance: ReactScopeInstance,\n+  internalInstanceHandle: Object,\n+): void {\n+  if (enableScopeAPI) {\n+    precacheFiberNode(internalInstanceHandle, scopeInstance);\n+  }\n+}\n+\n+export function getInstanceFromScope(\n+  scopeInstance: ReactScopeInstance,\n+): null | Object {\n+  if (enableScopeAPI) {\n+    return getFiberFromScopeInstance(scopeInstance);\n+  }\n+  return null;\n+}\n+\n \/\/ -------------------\n \/\/     Microtasks\n \/\/ -------------------\n@@ -679,16 +710,84 @@ export function unhideTextInstance(\n }\n \n export function clearContainer(container: Container): void {\n-  if (container.nodeType === ELEMENT_NODE) {\n-    ((container: any): Element).textContent = '';\n-  } else if (container.nodeType === DOCUMENT_NODE) {\n-    if (container.documentElement) {\n-      \/\/ $FlowFixMe[incompatible-call]\n-      container.removeChild(container.documentElement);\n+  if (enableHostSingletons) {\n+    \/\/ We have refined the container to Element type\n+    const nodeType = container.nodeType;\n+    if (nodeType === DOCUMENT_NODE || nodeType === ELEMENT_NODE) {\n+      switch (container.nodeName) {\n+        case '#document':\n+        case 'HTML':\n+        case 'HEAD':\n+        case 'BODY': {\n+          let node = container.firstChild;\n+          while (node) {\n+            const nextNode = node.nextSibling;\n+            const nodeName = node.nodeName;\n+            switch (nodeName) {\n+              case 'HTML':\n+              case 'HEAD':\n+              case 'BODY': {\n+                clearContainer((node: any));\n+                \/\/ If these singleton instances had previously been rendered with React they\n+                \/\/ may still hold on to references to the previous fiber tree. We detatch them\n+                \/\/ prospectiveyl to reset them to a baseline starting state since we cannot create\n+                \/\/ new instances.\n+                detachDeletedInstance((node: any));\n+                break;\n+              }\n+              case 'STYLE': {\n+                break;\n+              }\n+              case 'LINK': {\n+                if (\n+                  ((node: any): HTMLLinkElement).rel.toLowerCase() ===\n+                  'stylesheet'\n+                ) {\n+                  break;\n+                }\n+              }\n+              \/\/ eslint-disable-next-line no-fallthrough\n+              default: {\n+                container.removeChild(node);\n+              }\n+            }\n+            node = nextNode;\n+          }\n+          return;\n+        }\n+        default: {\n+          container.textContent = '';\n+        }\n+      }\n+    }\n+  } else {\n+    if (container.nodeType === ELEMENT_NODE) {\n+      \/\/ We have refined the container to Element type\n+      const element: Element = (container: any);\n+      element.textContent = '';\n+    } else if (container.nodeType === DOCUMENT_NODE) {\n+      \/\/ We have refined the container to Document type\n+      const doc: Document = (container: any);\n+      if (doc.documentElement) {\n+        doc.removeChild(doc.documentElement);\n+      }\n     }\n   }\n }\n \n+\/\/ Making this so we can eventually move all of the instance caching to the commit phase.\n+\/\/ Currently this is only used to associate fiber and props to instances for hydrating\n+\/\/ HostSingletons. The reason we need it here is we only want to make this binding on commit\n+\/\/ because only one fiber can own the instance at a time and render can fail\/restart\n+export function bindInstance(\n+  instance: Instance,\n+  props: Props,\n+  internalInstanceHandle: mixed,\n+) {\n+  precacheFiberNode((internalInstanceHandle: any), instance);\n+  updateFiberProps(instance, props);\n+}\n+\n \/\/ -------------------\n \/\/     Hydration\n \/\/ -------------------\n@@ -781,9 +880,52 @@ function getNextHydratable(node) {\n   \/\/ Skip non-hydratable nodes.\n   for (; node != null; node = ((node: any): Node).nextSibling) {\n     const nodeType = node.nodeType;\n-    if (enableFloat) {\n+    if (enableFloat && enableHostSingletons) {\n+      if (nodeType === ELEMENT_NODE) {\n+        const element: Element = (node: any);\n+        switch (element.tagName) {\n+          case 'LINK': {\n+            const linkEl: HTMLLinkElement = (element: any);\n+            const rel = linkEl.rel;\n+            if (\n+              rel === 'preload' ||\n+              (rel === 'stylesheet' && linkEl.hasAttribute('data-rprec'))\n+            ) {\n+              continue;\n+            }\n+            break;\n+          }\n+          case 'HTML':\n+          case 'HEAD':\n+          case 'BODY': {\n+            continue;\n+          }\n+        }\n+        break;\n+      } else if (nodeType === TEXT_NODE) {\n+        break;\n+      }\n+    } else if (enableFloat) {\n       if (nodeType === ELEMENT_NODE) {\n-        if (isHostResourceInstance(((node: any): Element))) {\n+        const element: Element = (node: any);\n+        if (element.tagName === 'LINK') {\n+          const linkEl: HTMLLinkElement = (element: any);\n+          const rel = linkEl.rel;\n+          if (\n+            rel === 'preload' ||\n+            (rel === 'stylesheet' && linkEl.hasAttribute('data-rprec'))\n+          ) {\n+            continue;\n+          }\n+        }\n+        break;\n+      } else if (nodeType === TEXT_NODE) {\n+        break;\n+      }\n+    } else if (enableHostSingletons) {\n+      if (nodeType === ELEMENT_NODE) {\n+        const tag: string = (node: any).tagName;\n+        if (tag === 'HTML' || tag === 'HEAD' || tag === 'BODY') {\n           continue;\n         }\n         break;\n@@ -970,6 +1112,8 @@ export function commitHydratedSuspenseInstance(\n   retryIfBlockedOn(suspenseInstance);\n }\n \n+\/\/ @TODO remove this function once float lands and hydrated tail nodes\n+\/\/ are controlled by HostSingleton fibers\n export function shouldDeleteUnhydratedTailInstances(\n   parentType: string,\n ): boolean {\n@@ -1174,31 +1318,9 @@ export function errorHydratingContainer(parentContainer: Container): void {\n   }\n }\n \n-export function getInstanceFromNode(node: HTMLElement): null | Object {\n-  return getClosestInstanceFromNode(node) || null;\n-}\n-\n-export function preparePortalMount(portalInstance: Instance): void {\n-  listenToAllSupportedEvents(portalInstance);\n-}\n-\n-export function prepareScopeUpdate(\n-  scopeInstance: ReactScopeInstance,\n-  internalInstanceHandle: Object,\n-): void {\n-  if (enableScopeAPI) {\n-    precacheFiberNode(internalInstanceHandle, scopeInstance);\n-  }\n-}\n-\n-export function getInstanceFromScope(\n-  scopeInstance: ReactScopeInstance,\n-): null | Object {\n-  if (enableScopeAPI) {\n-    return getFiberFromScopeInstance(scopeInstance);\n-  }\n-  return null;\n-}\n+\/\/ -------------------\n+\/\/     Test Selectors\n+\/\/ -------------------\n \n export const supportsTestSelectors = true;\n \n@@ -1236,6 +1358,7 @@ export function matchAccessibilityRole(node: Instance, role: string): boolean {\n export function getTextContent(fiber: Fiber): string | null {\n   switch (fiber.tag) {\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent:\n       let textContent = '';\n       const childNodes = fiber.stateNode.childNodes;\n@@ -1353,25 +1476,6 @@ export function requestPostPaintCallback(callback: (time: number) => void) {\n export const supportsResources = true;\n \n export {isHostResourceType};\n-function isHostResourceInstance(instance: Instance | Container): boolean {\n-  if (instance.nodeType === ELEMENT_NODE) {\n-    \/\/ $FlowFixMe[prop-missing] Flow doesn't understand `nodeType` test.\n-    switch (instance.tagName.toLowerCase()) {\n-      case 'link': {\n-        const rel = ((instance: any): HTMLLinkElement).rel;\n-        return (\n-          rel === 'preload' ||\n-          \/\/ $FlowFixMe[prop-missing] Flow doesn't understand `nodeType` test.\n-          (rel === 'stylesheet' && instance.hasAttribute('data-rprec'))\n-        );\n-      }\n-      default: {\n-        return false;\n-      }\n-    }\n-  }\n-  return false;\n-}\n \n export function prepareRendererToRender(rootContainer: Container) {\n   if (enableFloat) {\n@@ -1390,3 +1494,147 @@ export {\n   acquireResource,\n   releaseResource,\n } from '.\/ReactDOMFloatClient';\n+\n+\/\/ -------------------\n+\/\/     Singletons\n+\/\/ -------------------\n+\n+export const supportsSingletons = true;\n+\n+export function isHostSingletonType(type: string): boolean {\n+  return type === 'html' || type === 'head' || type === 'body';\n+}\n+\n+export function resolveSingletonInstance(\n+  type: string,\n+  props: Props,\n+  rootContainerInstance: Container,\n+  hostContext: HostContext,\n+  validateDOMNestingDev: boolean,\n+): Instance {\n+  if (__DEV__) {\n+    if (validateDOMNestingDev) {\n+      const hostContextDev = ((hostContext: any): HostContextDev);\n+      validateDOMNesting(type, null, hostContextDev.ancestorInfo);\n+    }\n+  }\n+  const ownerDocument = getOwnerDocumentFromRootContainer(\n+    rootContainerInstance,\n+  );\n+  switch (type) {\n+    case 'html': {\n+      const documentElement = ownerDocument.documentElement;\n+      if (!documentElement) {\n+        throw new Error(\n+          'React expected an <html> element (document.documentElement) to exist in the Document but one was' +\n+            ' not found. React never removes the documentElement for any Document it renders into so' +\n+            ' the cause is likely in some other script running on this page.',\n+        );\n+      }\n+      return documentElement;\n+    }\n+    case 'head': {\n+      const head = ownerDocument.head;\n+      if (!head) {\n+        throw new Error(\n+          'React expected a <head> element (document.head) to exist in the Document but one was' +\n+            ' not found. React never removes the head for any Document it renders into so' +\n+            ' the cause is likely in some other script running on this page.',\n+        );\n+      }\n+      return head;\n+    }\n+    case 'body': {\n+      const body = ownerDocument.body;\n+      if (!body) {\n+        throw new Error(\n+          'React expected a <body> element (document.body) to exist in the Document but one was' +\n+            ' not found. React never removes the body for any Document it renders into so' +\n+            ' the cause is likely in some other script running on this page.',\n+        );\n+      }\n+      return body;\n+    }\n+    default: {\n+      throw new Error(\n+        'resolveSingletonInstance was called with an element type that is not supported. This is a bug in React.',\n+      );\n+    }\n+  }\n+}\n+\n+export function acquireSingletonInstance(\n+  type: string,\n+  props: Props,\n+  instance: Instance,\n+  internalInstanceHandle: Object,\n+): void {\n+  if (__DEV__) {\n+    const currentInstanceHandle = getInstanceFromNodeDOMTree(instance);\n+    if (currentInstanceHandle) {\n+      const tagName = instance.tagName.toLowerCase();\n+      console.error(\n+        'You are mounting a new %s component when a previous one has not first unmounted. It is an' +\n+          ' error to render more than one %s component at a time and attributes and children of these' +\n+          ' components will likely fail in unpredictable ways. Please only render a single instance of' +\n+          ' <%s> and if you need to mount a new one, ensure any previous ones have unmounted first.',\n+        tagName,\n+        tagName,\n+        tagName,\n+      );\n+    }\n+    switch (type) {\n+      case 'html':\n+      case 'head':\n+      case 'body': {\n+        break;\n+      }\n+      default: {\n+        console.error(\n+          'acquireSingletonInstance was called with an element type that is not supported. This is a bug in React.',\n+        );\n+      }\n+    }\n+  }\n+\n+  const attributes = instance.attributes;\n+  while (attributes.length) {\n+    instance.removeAttributeNode(attributes[0]);\n+  }\n+\n+  setInitialProperties(instance, type, props);\n+  precacheFiberNode(internalInstanceHandle, instance);\n+  updateFiberProps(instance, props);\n+}\n+\n+export function releaseSingletonInstance(instance: Instance): void {\n+  const attributes = instance.attributes;\n+  while (attributes.length) {\n+    instance.removeAttributeNode(attributes[0]);\n+  }\n+  detachDeletedInstance(instance);\n+}\n+\n+export function clearSingleton(instance: Instance): void {\n+  const element: Element = (instance: any);\n+  let node = element.firstChild;\n+  while (node) {\n+    const nextNode = node.nextSibling;\n+    const nodeName = node.nodeName;\n+    if (getInstanceFromNodeDOMTree(node)) {\n+      \/\/ retain nodes owned by React\n+    } else if (\n+      nodeName === 'HEAD' ||\n+      nodeName === 'BODY' ||\n+      nodeName === 'STYLE' ||\n+      (nodeName === 'LINK' &&\n+        ((node: any): HTMLLinkElement).rel.toLowerCase() === 'stylesheet')\n+    ) {\n+      \/\/ retain these nodes\n+    } else {\n+      element.removeChild(node);\n+    }\n+    node = nextNode;\n+  }\n+  return;\n+}\ndiff --git a\/packages\/react-dom-bindings\/src\/events\/DOMPluginEventSystem.js b\/packages\/react-dom-bindings\/src\/events\/DOMPluginEventSystem.js\nindex 60565a7af8..645478f5b1 100644\n--- a\/packages\/react-dom-bindings\/src\/events\/DOMPluginEventSystem.js\n+++ b\/packages\/react-dom-bindings\/src\/events\/DOMPluginEventSystem.js\n@@ -34,6 +34,7 @@ import {\n   HostPortal,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n   ScopeComponent,\n } from 'react-reconciler\/src\/ReactWorkTags';\n@@ -54,6 +55,7 @@ import {\n   enableCreateEventHandleAPI,\n   enableScopeAPI,\n   enableFloat,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n import {\n   invokeGuardedCallbackAndCatchFirstError,\n@@ -626,7 +628,8 @@ export function dispatchEventForPluginEventSystem(\n             if (\n               parentTag === HostComponent ||\n               parentTag === HostText ||\n-              (enableFloat ? parentTag === HostResource : false)\n+              (enableFloat ? parentTag === HostResource : false) ||\n+              (enableHostSingletons ? parentTag === HostSingleton : false)\n             ) {\n               node = ancestorInst = parentNode;\n               continue mainLoop;\n@@ -682,7 +685,9 @@ export function accumulateSinglePhaseListeners(\n     const {stateNode, tag} = instance;\n     \/\/ Handle listeners that are on HostComponents (i.e. <div>)\n     if (\n-      (tag === HostComponent || (enableFloat ? tag === HostResource : false)) &&\n+      (tag === HostComponent ||\n+        (enableFloat ? tag === HostResource : false) ||\n+        (enableHostSingletons ? tag === HostSingleton : false)) &&\n       stateNode !== null\n     ) {\n       lastHostComponent = stateNode;\n@@ -796,7 +801,9 @@ export function accumulateTwoPhaseListeners(\n     const {stateNode, tag} = instance;\n     \/\/ Handle listeners that are on HostComponents (i.e. <div>)\n     if (\n-      (tag === HostComponent || (enableFloat ? tag === HostResource : false)) &&\n+      (tag === HostComponent ||\n+        (enableFloat ? tag === HostResource : false) ||\n+        (enableHostSingletons ? tag === HostSingleton : false)) &&\n       stateNode !== null\n     ) {\n       const currentTarget = stateNode;\n@@ -830,7 +837,11 @@ function getParent(inst: Fiber | null): Fiber | null {\n     \/\/ events to their parent. We could also go through parentNode on the\n     \/\/ host node but that wouldn't work for React Native and doesn't let us\n     \/\/ do the portal feature.\n-  } while (inst && inst.tag !== HostComponent);\n+  } while (\n+    inst &&\n+    inst.tag !== HostComponent &&\n+    (!enableHostSingletons ? true : inst.tag !== HostSingleton)\n+  );\n   if (inst) {\n     return inst;\n   }\n@@ -897,7 +908,9 @@ function accumulateEnterLeaveListenersForEvent(\n       break;\n     }\n     if (\n-      (tag === HostComponent || (enableFloat ? tag === HostResource : false)) &&\n+      (tag === HostComponent ||\n+        (enableFloat ? tag === HostResource : false) ||\n+        (enableHostSingletons ? tag === HostSingleton : false)) &&\n       stateNode !== null\n     ) {\n       const currentTarget = stateNode;\ndiff --git a\/packages\/react-dom-bindings\/src\/events\/plugins\/EnterLeaveEventPlugin.js b\/packages\/react-dom-bindings\/src\/events\/plugins\/EnterLeaveEventPlugin.js\nindex 29484a5cd5..7792308536 100644\n--- a\/packages\/react-dom-bindings\/src\/events\/plugins\/EnterLeaveEventPlugin.js\n+++ b\/packages\/react-dom-bindings\/src\/events\/plugins\/EnterLeaveEventPlugin.js\n@@ -24,7 +24,12 @@ import {\n } from '..\/..\/client\/ReactDOMComponentTree';\n import {accumulateEnterLeaveTwoPhaseListeners} from '..\/DOMPluginEventSystem';\n \n-import {HostComponent, HostText} from 'react-reconciler\/src\/ReactWorkTags';\n+import {enableHostSingletons} from 'shared\/ReactFeatureFlags';\n+import {\n+  HostComponent,\n+  HostSingleton,\n+  HostText,\n+} from 'react-reconciler\/src\/ReactWorkTags';\n import {getNearestMountedFiber} from 'react-reconciler\/src\/ReactFiberTreeReflection';\n \n function registerEvents() {\n@@ -102,9 +107,12 @@ function extractEvents(\n     to = related ? getClosestInstanceFromNode((related: any)) : null;\n     if (to !== null) {\n       const nearestMounted = getNearestMountedFiber(to);\n+      const tag = to.tag;\n       if (\n         to !== nearestMounted ||\n-        (to.tag !== HostComponent && to.tag !== HostText)\n+        (tag !== HostComponent &&\n+          (!enableHostSingletons ? true : tag !== HostSingleton) &&\n+          tag !== HostText)\n       ) {\n         to = null;\n       }\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex 532a8da583..82d103cfec 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -983,7 +983,6 @@ describe('ReactDOMFizzServer', () => {\n   });\n \n   \/\/ @gate enableSuspenseList\n-\n   it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {\n     const ref = React.createRef();\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js\nindex 937796dfc8..5118381920 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js\n@@ -1028,8 +1028,60 @@ describe('ReactDOMFloat', () => {\n       );\n     });\n \n-    \/\/ @gate enableFloat\n+    \/\/ @gate enableFloat && enableHostSingletons\n     it('retains styles even when a new html, head, and\/body mount', async () => {\n+      await actIntoEmptyDocument(() => {\n+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n+          <html>\n+            <head \/>\n+            <body>\n+              <link rel=\"stylesheet\" href=\"foo\" precedence=\"foo\" \/>\n+              <link rel=\"stylesheet\" href=\"bar\" precedence=\"bar\" \/>\n+              server\n+            <\/body>\n+          <\/html>,\n+        );\n+        pipe(writable);\n+      });\n+      const errors = [];\n+      ReactDOMClient.hydrateRoot(\n+        document,\n+        <html>\n+          <head>\n+            <link rel=\"stylesheet\" href=\"qux\" precedence=\"qux\" \/>\n+            <link rel=\"stylesheet\" href=\"foo\" precedence=\"foo\" \/>\n+          <\/head>\n+          <body>client<\/body>\n+        <\/html>,\n+        {\n+          onRecoverableError(error) {\n+            errors.push(error.message);\n+          },\n+        },\n+      );\n+      expect(() => {\n+        expect(Scheduler).toFlushWithoutYielding();\n+      }).toErrorDev(\n+        [\n+          'Warning: Text content did not match. Server: \"server\" Client: \"client\"',\n+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',\n+        ],\n+        {withoutStack: 1},\n+      );\n+      expect(getVisibleChildren(document)).toEqual(\n+        <html>\n+          <head>\n+            <link rel=\"stylesheet\" href=\"foo\" data-rprec=\"foo\" \/>\n+            <link rel=\"stylesheet\" href=\"bar\" data-rprec=\"bar\" \/>\n+            <link rel=\"stylesheet\" href=\"qux\" data-rprec=\"qux\" \/>\n+          <\/head>\n+          <body>client<\/body>\n+        <\/html>,\n+      );\n+    });\n+\n+    \/\/ @gate enableFloat && !enableHostSingletons\n+    it('retains styles even when a new html, head, and\/body mount - without HostSingleton', async () => {\n       await actIntoEmptyDocument(() => {\n         const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n           <html>\n@@ -1079,10 +1131,8 @@ describe('ReactDOMFloat', () => {\n       );\n     });\n \n-    \/\/ Disabling for now since we are going to live with not having a restore step while we consider\n-    \/\/ HostSingletons or other solutions\n-    \/\/ @gate enableFloat\n-    xit('retains styles in head through head remounts', async () => {\n+    \/\/ @gate enableFloat && enableHostSingletons\n+    it('retains styles in head through head remounts', async () => {\n       const root = ReactDOMClient.createRoot(document);\n       root.render(\n         <html>\n@@ -1090,6 +1140,7 @@ describe('ReactDOMFloat', () => {\n           <body>\n             <link rel=\"stylesheet\" href=\"foo\" precedence=\"foo\" \/>\n             <link rel=\"stylesheet\" href=\"bar\" precedence=\"bar\" \/>\n+            {null}\n             hello\n           <\/body>\n         <\/html>,\n@@ -1110,17 +1161,21 @@ describe('ReactDOMFloat', () => {\n           <head key={2} \/>\n           <body>\n             <link rel=\"stylesheet\" href=\"foo\" precedence=\"foo\" \/>\n-            <link rel=\"stylesheet\" href=\"bar\" precedence=\"bar\" \/>\n+            {null}\n+            <link rel=\"stylesheet\" href=\"baz\" precedence=\"baz\" \/>\n             hello\n           <\/body>\n         <\/html>,\n       );\n       expect(Scheduler).toFlushWithoutYielding();\n+      \/\/ The reason we do not see preloads in the head is they are inserted synchronously\n+      \/\/ during render and then when the new singleton mounts it resets it's content, retaining only styles\n       expect(getVisibleChildren(document)).toEqual(\n         <html>\n           <head>\n             <link rel=\"stylesheet\" href=\"foo\" data-rprec=\"foo\" \/>\n             <link rel=\"stylesheet\" href=\"bar\" data-rprec=\"bar\" \/>\n+            <link rel=\"stylesheet\" href=\"baz\" data-rprec=\"baz\" \/>\n           <\/head>\n           <body>hello<\/body>\n         <\/html>,\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js\nindex 0245cebd0a..2b84de3376 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js\n@@ -358,22 +358,27 @@ describe('ReactDOMRoot', () => {\n     );\n   });\n \n-  \/\/ @gate !__DEV__ || !enableFloat\n   it('warns if updating a root that has had its contents removed', async () => {\n     const root = ReactDOMClient.createRoot(container);\n     root.render(<div>Hi<\/div>);\n     Scheduler.unstable_flushAll();\n     container.innerHTML = '';\n \n-    expect(() => {\n+    if (gate(flags => flags.enableFloat || flags.enableHostSingletons)) {\n+      \/\/ When either of these flags are on this validation is turned off so we\n+      \/\/ expect there to be no warnings\n       root.render(<div>Hi<\/div>);\n-    }).toErrorDev(\n-      'render(...): It looks like the React-rendered content of the ' +\n-        'root container was removed without using React. This is not ' +\n-        'supported and will cause errors. Instead, call ' +\n-        \"root.unmount() to empty a root's container.\",\n-      {withoutStack: true},\n-    );\n+    } else {\n+      expect(() => {\n+        root.render(<div>Hi<\/div>);\n+      }).toErrorDev(\n+        'render(...): It looks like the React-rendered content of the ' +\n+          'root container was removed without using React. This is not ' +\n+          'supported and will cause errors. Instead, call ' +\n+          \"root.unmount() to empty a root's container.\",\n+        {withoutStack: true},\n+      );\n+    }\n   });\n \n   it('opts-in to concurrent default updates', async () => {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMSingletonComponents-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMSingletonComponents-test.js\nnew file mode 100644\nindex 0000000000..617dddd89c\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMSingletonComponents-test.js\n@@ -0,0 +1,982 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+let JSDOM;\n+let Stream;\n+let Scheduler;\n+let React;\n+let ReactDOMClient;\n+let ReactDOMFizzServer;\n+let document;\n+let writable;\n+let container;\n+let buffer = '';\n+let hasErrored = false;\n+let fatalError = undefined;\n+\n+describe('ReactDOM HostSingleton', () => {\n+  beforeEach(() => {\n+    jest.resetModules();\n+    JSDOM = require('jsdom').JSDOM;\n+    Scheduler = require('scheduler');\n+    React = require('react');\n+    ReactDOMClient = require('react-dom\/client');\n+    ReactDOMFizzServer = require('react-dom\/server');\n+    Stream = require('stream');\n+\n+    \/\/ Test Environment\n+    const jsdom = new JSDOM(\n+      '<!DOCTYPE html><html><head><\/head><body><div id=\"container\">',\n+      {\n+        runScripts: 'dangerously',\n+      },\n+    );\n+    document = jsdom.window.document;\n+    container = document.getElementById('container');\n+\n+    buffer = '';\n+    hasErrored = false;\n+\n+    writable = new Stream.PassThrough();\n+    writable.setEncoding('utf8');\n+    writable.on('data', chunk => {\n+      buffer += chunk;\n+    });\n+    writable.on('error', error => {\n+      hasErrored = true;\n+      fatalError = error;\n+    });\n+  });\n+\n+  async function actIntoEmptyDocument(callback) {\n+    await callback();\n+    \/\/ Await one turn around the event loop.\n+    \/\/ This assumes that we'll flush everything we have so far.\n+    await new Promise(resolve => {\n+      setImmediate(resolve);\n+    });\n+    if (hasErrored) {\n+      throw fatalError;\n+    }\n+\n+    const bufferedContent = buffer;\n+    buffer = '';\n+\n+    const jsdom = new JSDOM(bufferedContent, {\n+      runScripts: 'dangerously',\n+    });\n+    document = jsdom.window.document;\n+    container = document;\n+  }\n+\n+  function getVisibleChildren(element) {\n+    const children = [];\n+    let node = element.firstChild;\n+    while (node) {\n+      if (node.nodeType === 1) {\n+        if (\n+          node.tagName !== 'SCRIPT' &&\n+          node.tagName !== 'TEMPLATE' &&\n+          node.tagName !== 'template' &&\n+          !node.hasAttribute('hidden') &&\n+          !node.hasAttribute('aria-hidden')\n+        ) {\n+          const props = {};\n+          const attributes = node.attributes;\n+          for (let i = 0; i < attributes.length; i++) {\n+            if (\n+              attributes[i].name === 'id' &&\n+              attributes[i].value.includes(':')\n+            ) {\n+              \/\/ We assume this is a React added ID that's a non-visual implementation detail.\n+              continue;\n+            }\n+            props[attributes[i].name] = attributes[i].value;\n+          }\n+          props.children = getVisibleChildren(node);\n+          children.push(React.createElement(node.tagName.toLowerCase(), props));\n+        }\n+      } else if (node.nodeType === 3) {\n+        children.push(node.data);\n+      }\n+      node = node.nextSibling;\n+    }\n+    return children.length === 0\n+      ? undefined\n+      : children.length === 1\n+      ? children[0]\n+      : children;\n+  }\n+\n+  \/\/ @gate enableHostSingletons\n+  it('warns if you render the same singleton twice at the same time', async () => {\n+    const root = ReactDOMClient.createRoot(document);\n+    root.render(\n+      <html>\n+        <head lang=\"en\">\n+          <title>Hello<\/title>\n+        <\/head>\n+        <body \/>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head lang=\"en\">\n+          <title>Hello<\/title>\n+        <\/head>\n+        <body \/>\n+      <\/html>,\n+    );\n+    root.render(\n+      <html>\n+        <head lang=\"en\">\n+          <title>Hello<\/title>\n+        <\/head>\n+        <head lang=\"es\" data-foo=\"foo\">\n+          <title>Hola<\/title>\n+        <\/head>\n+        <body \/>\n+      <\/html>,\n+    );\n+    expect(() => {\n+      expect(Scheduler).toFlushWithoutYielding();\n+    }).toErrorDev(\n+      'Warning: You are mounting a new head component when a previous one has not first unmounted. It is an error to render more than one head component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <head> and if you need to mount a new one, ensure any previous ones have unmounted first',\n+    );\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head lang=\"es\" data-foo=\"foo\">\n+          <title>Hello<\/title>\n+          <title>Hola<\/title>\n+        <\/head>\n+        <body \/>\n+      <\/html>,\n+    );\n+\n+    root.render(\n+      <html>\n+        {null}\n+        {null}\n+        <head lang=\"fr\">\n+          <title>Bonjour<\/title>\n+        <\/head>\n+        <body \/>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head lang=\"fr\">\n+          <title>Bonjour<\/title>\n+        <\/head>\n+        <body \/>\n+      <\/html>,\n+    );\n+\n+    root.render(\n+      <html>\n+        <head lang=\"en\">\n+          <title>Hello<\/title>\n+        <\/head>\n+        <body \/>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head lang=\"en\">\n+          <title>Hello<\/title>\n+        <\/head>\n+        <body \/>\n+      <\/html>,\n+    );\n+  });\n+\n+  \/\/ @gate enableHostSingletons\n+  it('renders into html, head, and body persistently so the node identities never change and extraneous styles are retained', async () => {\n+    gate(flags => {\n+      if (flags.enableHostSingletons !== true) {\n+        \/\/ We throw here because when this test fails it ends up with sync work in a microtask\n+        \/\/ that throws after the expectTestToFail check asserts the failure. this causes even the\n+        \/\/ expected failure to fail. This just fails explicitly and early\n+        throw new Error('manually opting out of test');\n+      }\n+    });\n+    \/\/ Server render some html that will get replaced with a client render\n+    await actIntoEmptyDocument(() => {\n+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n+        <html data-foo=\"foo\">\n+          <head data-bar=\"bar\">\n+            <link rel=\"stylesheet\" href=\"resource\" \/>\n+            <title>a server title<\/title>\n+            <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+            <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+          <\/head>\n+          <body data-baz=\"baz\">\n+            <div>hello world<\/div>\n+            <style>\n+              {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+            <\/style>\n+            <div>goodbye<\/div>\n+          <\/body>\n+        <\/html>,\n+      );\n+      pipe(writable);\n+    });\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html data-foo=\"foo\">\n+        <head data-bar=\"bar\">\n+          <link rel=\"preload\" href=\"resource\" as=\"style\" \/>\n+          <link rel=\"preload\" href=\"3rdparty\" as=\"style\" \/>\n+          <link rel=\"preload\" href=\"3rdparty2\" as=\"style\" \/>\n+          <link rel=\"stylesheet\" href=\"resource\" \/>\n+          <title>a server title<\/title>\n+          <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+        <\/head>\n+        <body data-baz=\"baz\">\n+          <div>hello world<\/div>\n+          <style>\n+            {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+          <\/style>\n+          <div>goodbye<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+    const {documentElement, head, body} = document;\n+    const persistentElements = [documentElement, head, body];\n+\n+    \/\/ Render into the document completely different html. Observe that styles\n+    \/\/ are retained as are html, body, and head referential identities. Because this was\n+    \/\/ server rendered and we are not hydrating we lose the semantic placement of the original\n+    \/\/ head contents and everything gets preprended. In a future update we might emit an insertion\n+    \/\/ edge from the server and make client rendering reslilient to interstitial placement\n+    const root = ReactDOMClient.createRoot(document);\n+    root.render(\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <title>a client title<\/title>\n+        <\/head>\n+        <body data-client-baz=\"baz\">\n+          <div>hello client<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(persistentElements).toEqual([\n+      document.documentElement,\n+      document.head,\n+      document.body,\n+    ]);\n+    \/\/ Similar to Hydration we don't reset attributes on the instance itself even on a fresh render.\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <link rel=\"stylesheet\" href=\"resource\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+          <title>a client title<\/title>\n+        <\/head>\n+        <body data-client-baz=\"baz\">\n+          <style>\n+            {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+          <\/style>\n+          <div>hello client<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    \/\/ Render new children and assert they append in the correct locations\n+    root.render(\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <title>a client title<\/title>\n+          <meta \/>\n+        <\/head>\n+        <body data-client-baz=\"baz\">\n+          <p>hello client again<\/p>\n+          <div>hello client<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(persistentElements).toEqual([\n+      document.documentElement,\n+      document.head,\n+      document.body,\n+    ]);\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <link rel=\"stylesheet\" href=\"resource\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+          <title>a client title<\/title>\n+          <meta \/>\n+        <\/head>\n+        <body data-client-baz=\"baz\">\n+          <style>\n+            {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+          <\/style>\n+          <p>hello client again<\/p>\n+          <div>hello client<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    \/\/ Remove some children\n+    root.render(\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <title>a client title<\/title>\n+        <\/head>\n+        <body data-client-baz=\"baz\">\n+          <p>hello client again<\/p>\n+        <\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(persistentElements).toEqual([\n+      document.documentElement,\n+      document.head,\n+      document.body,\n+    ]);\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <link rel=\"stylesheet\" href=\"resource\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+          <title>a client title<\/title>\n+        <\/head>\n+        <body data-client-baz=\"baz\">\n+          <style>\n+            {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+          <\/style>\n+          <p>hello client again<\/p>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    \/\/ Remove a persistent component\n+    \/\/ @TODO figure out whether to clean up attributes. restoring them is likely\n+    \/\/ not possible.\n+    root.render(\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <title>a client title<\/title>\n+        <\/head>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(persistentElements).toEqual([\n+      document.documentElement,\n+      document.head,\n+      document.body,\n+    ]);\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <link rel=\"stylesheet\" href=\"resource\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+          <title>a client title<\/title>\n+        <\/head>\n+        <body>\n+          <style>\n+            {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+          <\/style>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    \/\/ unmount the root\n+    root.unmount();\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(persistentElements).toEqual([\n+      document.documentElement,\n+      document.head,\n+      document.body,\n+    ]);\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head>\n+          <link rel=\"stylesheet\" href=\"resource\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+        <\/head>\n+        <body>\n+          <style>\n+            {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+          <\/style>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    \/\/ Now let's hydrate the document with known mismatching content\n+    \/\/ We assert that the identities of html, head, and body still haven't changed\n+    \/\/ and that the embedded styles are still retained\n+    const hydrationErrors = [];\n+    let hydrateRoot = ReactDOMClient.hydrateRoot(\n+      document,\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <title>a client title<\/title>\n+        <\/head>\n+        <body data-client-baz=\"baz\">\n+          <div>hello client<\/div>\n+        <\/body>\n+      <\/html>,\n+      {\n+        onRecoverableError(error, errorInfo) {\n+          hydrationErrors.push([\n+            error.message,\n+            errorInfo.componentStack\n+              ? errorInfo.componentStack.split('\\n')[1].trim()\n+              : null,\n+          ]);\n+        },\n+      },\n+    );\n+    expect(() => {\n+      expect(Scheduler).toFlushWithoutYielding();\n+    }).toErrorDev(\n+      [\n+        `Warning: Expected server HTML to contain a matching <title> in <head>.\n+    in title (at **)\n+    in head (at **)\n+    in html (at **)`,\n+        `Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.`,\n+      ],\n+      {withoutStack: 1},\n+    );\n+    expect(hydrationErrors).toEqual([\n+      [\n+        'Hydration failed because the initial UI does not match what was rendered on the server.',\n+        'at title',\n+      ],\n+      [\n+        'Hydration failed because the initial UI does not match what was rendered on the server.',\n+        'at div',\n+      ],\n+      [\n+        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',\n+        null,\n+      ],\n+    ]);\n+    expect(persistentElements).toEqual([\n+      document.documentElement,\n+      document.head,\n+      document.body,\n+    ]);\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <link rel=\"stylesheet\" href=\"resource\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+          <title>a client title<\/title>\n+        <\/head>\n+        <body data-client-baz=\"baz\">\n+          <style>\n+            {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+          <\/style>\n+          <div>hello client<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    \/\/ Reset the tree\n+    hydrationErrors.length = 0;\n+    hydrateRoot.unmount();\n+\n+    \/\/ Now we try hydrating again with matching nodes and we ensure\n+    \/\/ the retained styles are bound to the hydrated fibers\n+    const link = document.querySelector('link[rel=\"stylesheet\"]');\n+    const style = document.querySelector('style');\n+    hydrateRoot = ReactDOMClient.hydrateRoot(\n+      document,\n+      <html data-client-foo=\"foo\">\n+        <head>\n+          <link rel=\"stylesheet\" href=\"resource\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+        <\/head>\n+        <body data-client-baz=\"baz\">\n+          <style>\n+            {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+          <\/style>\n+        <\/body>\n+      <\/html>,\n+      {\n+        onRecoverableError(error, errorInfo) {\n+          hydrationErrors.push([\n+            error.message,\n+            errorInfo.componentStack\n+              ? errorInfo.componentStack.split('\\n')[1].trim()\n+              : null,\n+          ]);\n+        },\n+      },\n+    );\n+    expect(hydrationErrors).toEqual([]);\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(persistentElements).toEqual([\n+      document.documentElement,\n+      document.head,\n+      document.body,\n+    ]);\n+    expect([link, style]).toEqual([\n+      document.querySelector('link[rel=\"stylesheet\"]'),\n+      document.querySelector('style'),\n+    ]);\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head>\n+          <link rel=\"stylesheet\" href=\"resource\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty\" \/>\n+          <link rel=\"stylesheet\" href=\"3rdparty2\" \/>\n+        <\/head>\n+        <body>\n+          <style>\n+            {`\n+                body: {\n+                  background-color: red;\n+                }`}\n+          <\/style>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    \/\/ We unmount a final time and observe that still we retain our persistent nodes\n+    \/\/ but they style contents which matched in hydration is removed\n+    hydrateRoot.unmount();\n+    expect(persistentElements).toEqual([\n+      document.documentElement,\n+      document.head,\n+      document.body,\n+    ]);\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head \/>\n+        <body \/>\n+      <\/html>,\n+    );\n+  });\n+\n+  \/\/ This test is not supported in this implementation. If we reintroduce insertion edge we should revisit\n+  \/\/ @gate enableHostSingletons\n+  xit('is able to maintain insertions in head and body between tree-adjacent Nodes', async () => {\n+    \/\/ Server render some html and hydrate on the client\n+    await actIntoEmptyDocument(() => {\n+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n+        <html>\n+          <head>\n+            <title>title<\/title>\n+          <\/head>\n+          <body>\n+            <div>hello<\/div>\n+          <\/body>\n+        <\/html>,\n+      );\n+      pipe(writable);\n+    });\n+    const root = ReactDOMClient.hydrateRoot(\n+      document,\n+      <html>\n+        <head>\n+          <title>title<\/title>\n+        <\/head>\n+        <body>\n+          <div>hello<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+\n+    \/\/ We construct and insert some artificial stylesheets mimicing what a 3rd party script might do\n+    \/\/ In the future we could hydrate with these already in the document but the rules are restrictive\n+    \/\/ still so it would fail and fall back to client rendering\n+    const [a, b, c, d, e, f, g, h] = 'abcdefgh'.split('').map(letter => {\n+      const link = document.createElement('link');\n+      link.rel = 'stylesheet';\n+      link.href = letter;\n+      return link;\n+    });\n+\n+    const head = document.head;\n+    const title = head.firstChild;\n+    head.insertBefore(a, title);\n+    head.insertBefore(b, title);\n+    head.appendChild(c);\n+    head.appendChild(d);\n+\n+    const bodyContent = document.body.firstChild;\n+    const body = document.body;\n+    body.insertBefore(e, bodyContent);\n+    body.insertBefore(f, bodyContent);\n+    body.appendChild(g);\n+    body.appendChild(h);\n+\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head>\n+          <link rel=\"stylesheet\" href=\"a\" \/>\n+          <link rel=\"stylesheet\" href=\"b\" \/>\n+          <title>title<\/title>\n+          <link rel=\"stylesheet\" href=\"c\" \/>\n+          <link rel=\"stylesheet\" href=\"d\" \/>\n+        <\/head>\n+        <body>\n+          <link rel=\"stylesheet\" href=\"e\" \/>\n+          <link rel=\"stylesheet\" href=\"f\" \/>\n+          <div>hello<\/div>\n+          <link rel=\"stylesheet\" href=\"g\" \/>\n+          <link rel=\"stylesheet\" href=\"h\" \/>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    \/\/ Unmount head and change children of body\n+    root.render(\n+      <html>\n+        {null}\n+        <body>\n+          <div>hello<\/div>\n+          <div>world<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head>\n+          <link rel=\"stylesheet\" href=\"a\" \/>\n+          <link rel=\"stylesheet\" href=\"b\" \/>\n+          <link rel=\"stylesheet\" href=\"c\" \/>\n+          <link rel=\"stylesheet\" href=\"d\" \/>\n+        <\/head>\n+        <body>\n+          <link rel=\"stylesheet\" href=\"e\" \/>\n+          <link rel=\"stylesheet\" href=\"f\" \/>\n+          <div>hello<\/div>\n+          <div>world<\/div>\n+          <link rel=\"stylesheet\" href=\"g\" \/>\n+          <link rel=\"stylesheet\" href=\"h\" \/>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    \/\/ Mount new head and unmount body\n+    root.render(\n+      <html>\n+        <head>\n+          <title>a new title<\/title>\n+        <\/head>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head>\n+          <title>a new title<\/title>\n+          <link rel=\"stylesheet\" href=\"a\" \/>\n+          <link rel=\"stylesheet\" href=\"b\" \/>\n+          <link rel=\"stylesheet\" href=\"c\" \/>\n+          <link rel=\"stylesheet\" href=\"d\" \/>\n+        <\/head>\n+        <body>\n+          <link rel=\"stylesheet\" href=\"e\" \/>\n+          <link rel=\"stylesheet\" href=\"f\" \/>\n+          <link rel=\"stylesheet\" href=\"g\" \/>\n+          <link rel=\"stylesheet\" href=\"h\" \/>\n+        <\/body>\n+      <\/html>,\n+    );\n+  });\n+\n+  \/\/ @gate enableHostSingletons\n+  it('clears persistent head and body when html is the container', async () => {\n+    await actIntoEmptyDocument(() => {\n+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n+        <html>\n+          <head>\n+            <link rel=\"stylesheet\" href=\"headbefore\" \/>\n+            <title>this should be removed<\/title>\n+            <link rel=\"stylesheet\" href=\"headafter\" \/>\n+          <\/head>\n+          <body>\n+            <link rel=\"stylesheet\" href=\"bodybefore\" \/>\n+            <div>this should be removed<\/div>\n+            <link rel=\"stylesheet\" href=\"bodyafter\" \/>\n+          <\/body>\n+        <\/html>,\n+      );\n+      pipe(writable);\n+    });\n+    container = document.documentElement;\n+\n+    const root = ReactDOMClient.createRoot(container);\n+    root.render(\n+      <>\n+        <head>\n+          <title>something new<\/title>\n+        <\/head>\n+        <body>\n+          <div>something new<\/div>\n+        <\/body>\n+      <\/>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head>\n+          <link rel=\"stylesheet\" href=\"headbefore\" \/>\n+          <link rel=\"stylesheet\" href=\"headafter\" \/>\n+          <title>something new<\/title>\n+        <\/head>\n+        <body>\n+          <link rel=\"stylesheet\" href=\"bodybefore\" \/>\n+          <link rel=\"stylesheet\" href=\"bodyafter\" \/>\n+          <div>something new<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+  });\n+\n+  \/\/ @gate enableHostSingletons\n+  it('clears persistent head when it is the container', async () => {\n+    await actIntoEmptyDocument(() => {\n+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n+        <html>\n+          <head>\n+            <link rel=\"stylesheet\" href=\"before\" \/>\n+            <title>this should be removed<\/title>\n+            <link rel=\"stylesheet\" href=\"after\" \/>\n+          <\/head>\n+          <body \/>\n+        <\/html>,\n+      );\n+      pipe(writable);\n+    });\n+    container = document.head;\n+\n+    const root = ReactDOMClient.createRoot(container);\n+    root.render(<title>something new<\/title>);\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head>\n+          <link rel=\"stylesheet\" href=\"before\" \/>\n+          <link rel=\"stylesheet\" href=\"after\" \/>\n+          <title>something new<\/title>\n+        <\/head>\n+        <body \/>\n+      <\/html>,\n+    );\n+  });\n+\n+  \/\/ @gate enableHostSingletons && enableFloat\n+  it('clears persistent body when it is the container', async () => {\n+    await actIntoEmptyDocument(() => {\n+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n+        <html>\n+          <head \/>\n+          <body>\n+            <link rel=\"stylesheet\" href=\"before\" \/>\n+            <div>this should be removed<\/div>\n+            <link rel=\"stylesheet\" href=\"after\" \/>\n+          <\/body>\n+        <\/html>,\n+      );\n+      pipe(writable);\n+    });\n+    container = document.body;\n+\n+    let root;\n+    \/\/ Given our new capabilities to render \"safely\" into the body we should consider removing this warning\n+    expect(() => {\n+      root = ReactDOMClient.createRoot(container);\n+    }).toErrorDev(\n+      'Warning: createRoot(): Creating roots directly with document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try using a container element created for your app.',\n+      {withoutStack: true},\n+    );\n+    root.render(<div>something new<\/div>);\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head>\n+          <link rel=\"preload\" as=\"style\" href=\"before\" \/>\n+          <link rel=\"preload\" as=\"style\" href=\"after\" \/>\n+        <\/head>\n+        <body>\n+          <link rel=\"stylesheet\" href=\"before\" \/>\n+          <link rel=\"stylesheet\" href=\"after\" \/>\n+          <div>something new<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+  });\n+\n+  it('renders single Text children into HostSingletons correctly', async () => {\n+    await actIntoEmptyDocument(() => {\n+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n+        <html>\n+          <head \/>\n+          <body>foo<\/body>\n+        <\/html>,\n+      );\n+      pipe(writable);\n+    });\n+\n+    let root = ReactDOMClient.hydrateRoot(\n+      document,\n+      <html>\n+        <head \/>\n+        <body>foo<\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head \/>\n+        <body>foo<\/body>\n+      <\/html>,\n+    );\n+\n+    root.render(\n+      <html>\n+        <head \/>\n+        <body>bar<\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head \/>\n+        <body>bar<\/body>\n+      <\/html>,\n+    );\n+\n+    root.unmount();\n+\n+    root = ReactDOMClient.createRoot(document);\n+    root.render(\n+      <html>\n+        <head \/>\n+        <body>baz<\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head \/>\n+        <body>baz<\/body>\n+      <\/html>,\n+    );\n+  });\n+\n+  it('supports going from single text child to many children back to single text child in body', async () => {\n+    const root = ReactDOMClient.createRoot(document);\n+    root.render(\n+      <html>\n+        <head \/>\n+        <body>foo<\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head \/>\n+        <body>foo<\/body>\n+      <\/html>,\n+    );\n+\n+    root.render(\n+      <html>\n+        <head \/>\n+        <body>\n+          <div>foo<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head \/>\n+        <body>\n+          <div>foo<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+\n+    root.render(\n+      <html>\n+        <head \/>\n+        <body>foo<\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head \/>\n+        <body>foo<\/body>\n+      <\/html>,\n+    );\n+\n+    root.render(\n+      <html>\n+        <head \/>\n+        <body>\n+          <div>foo<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+    expect(Scheduler).toFlushWithoutYielding();\n+    expect(getVisibleChildren(document)).toEqual(\n+      <html>\n+        <head \/>\n+        <body>\n+          <div>foo<\/div>\n+        <\/body>\n+      <\/html>,\n+    );\n+  });\n+});\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js b\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\nindex 95b814b331..c67f9564b6 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\n@@ -62,7 +62,8 @@ describe('rendering React components at document', () => {\n       expect(body === testDocument.body).toBe(true);\n     });\n \n-    it('should not be able to unmount component from document node', () => {\n+    \/\/ @gate enableHostSingletons\n+    it('should be able to unmount component from document node, but leaves singleton nodes intact', () => {\n       class Root extends React.Component {\n         render() {\n           return (\n@@ -81,7 +82,40 @@ describe('rendering React components at document', () => {\n       ReactDOM.hydrate(<Root \/>, testDocument);\n       expect(testDocument.body.innerHTML).toBe('Hello world');\n \n-      \/\/ In Fiber this actually works. It might not be a good idea though.\n+      const originalDocEl = testDocument.documentElement;\n+      const originalHead = testDocument.head;\n+      const originalBody = testDocument.body;\n+\n+      \/\/ When we unmount everything is removed except the singleton nodes of html, head, and body\n+      ReactDOM.unmountComponentAtNode(testDocument);\n+      expect(testDocument.firstChild).toBe(originalDocEl);\n+      expect(testDocument.head).toBe(originalHead);\n+      expect(testDocument.body).toBe(originalBody);\n+      expect(originalBody.firstChild).toEqual(null);\n+      expect(originalHead.firstChild).toEqual(null);\n+    });\n+\n+    \/\/ @gate !enableHostSingletons\n+    it('should be able to unmount component from document node', () => {\n+      class Root extends React.Component {\n+        render() {\n+          return (\n+            <html>\n+              <head>\n+                <title>Hello World<\/title>\n+              <\/head>\n+              <body>Hello world<\/body>\n+            <\/html>\n+          );\n+        }\n+      }\n+\n+      const markup = ReactDOMServer.renderToString(<Root \/>);\n+      const testDocument = getTestDocument(markup);\n+      ReactDOM.hydrate(<Root \/>, testDocument);\n+      expect(testDocument.body.innerHTML).toBe('Hello world');\n+\n+      \/\/ When we unmount everything is removed except the persistent nodes of html, head, and body\n       ReactDOM.unmountComponentAtNode(testDocument);\n       expect(testDocument.firstChild).toBe(null);\n     });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/validateDOMNesting-test.js b\/packages\/react-dom\/src\/__tests__\/validateDOMNesting-test.js\nindex 1f67cc1f57..cdc97fbef3 100644\n--- a\/packages\/react-dom\/src\/__tests__\/validateDOMNesting-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/validateDOMNesting-test.js\n@@ -102,22 +102,49 @@ describe('validateDOMNesting', () => {\n           '    in html (at **)',\n       ],\n     );\n-    expectWarnings(\n-      ['body', 'body'],\n-      [\n-        'render(): Rendering components directly into document.body is discouraged',\n-        'validateDOMNesting(...): <body> cannot appear as a child of <body>.\\n' +\n-          '    in body (at **)',\n-      ],\n-      1,\n-    );\n-    expectWarnings(\n-      ['svg', 'foreignObject', 'body', 'p'],\n-      [\n-        'validateDOMNesting(...): <body> cannot appear as a child of <foreignObject>.\\n' +\n-          '    in body (at **)\\n' +\n-          '    in foreignObject (at **)',\n-      ],\n-    );\n+    if (gate(flags => flags.enableHostSingletons)) {\n+      expectWarnings(\n+        ['body', 'body'],\n+        [\n+          'render(): Rendering components directly into document.body is discouraged',\n+          'validateDOMNesting(...): <body> cannot appear as a child of <body>.\\n' +\n+            '    in body (at **)',\n+          'Warning: You are mounting a new body component when a previous one has not first unmounted. It is an error to render more than one body component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <body> and if you need to mount a new one, ensure any previous ones have unmounted first.\\n' +\n+            '    in body (at **)',\n+        ],\n+        1,\n+      );\n+    } else {\n+      expectWarnings(\n+        ['body', 'body'],\n+        [\n+          'render(): Rendering components directly into document.body is discouraged',\n+          'validateDOMNesting(...): <body> cannot appear as a child of <body>.\\n' +\n+            '    in body (at **)',\n+        ],\n+        1,\n+      );\n+    }\n+    if (gate(flags => flags.enableHostSingletons)) {\n+      expectWarnings(\n+        ['svg', 'foreignObject', 'body', 'p'],\n+        [\n+          'validateDOMNesting(...): <body> cannot appear as a child of <foreignObject>.\\n' +\n+            '    in body (at **)\\n' +\n+            '    in foreignObject (at **)',\n+          'Warning: You are mounting a new body component when a previous one has not first unmounted. It is an error to render more than one body component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <body> and if you need to mount a new one, ensure any previous ones have unmounted first.\\n' +\n+            '    in body (at **)',\n+        ],\n+      );\n+    } else {\n+      expectWarnings(\n+        ['svg', 'foreignObject', 'body', 'p'],\n+        [\n+          'validateDOMNesting(...): <body> cannot appear as a child of <foreignObject>.\\n' +\n+            '    in body (at **)\\n' +\n+            '    in foreignObject (at **)',\n+        ],\n+      );\n+    }\n   });\n });\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMRoot.js b\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\nindex ddd52b7686..1fc2e71eb8 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\n@@ -18,7 +18,7 @@ const {Dispatcher} = ReactDOMSharedInternals;\n import {ReactDOMClientDispatcher} from 'react-dom-bindings\/src\/client\/ReactDOMFloatClient';\n import {queueExplicitHydrationTarget} from 'react-dom-bindings\/src\/events\/ReactDOMEventReplaying';\n import {REACT_ELEMENT_TYPE} from 'shared\/ReactSymbols';\n-import {enableFloat} from 'shared\/ReactFeatureFlags';\n+import {enableFloat, enableHostSingletons} from 'shared\/ReactFeatureFlags';\n \n export type RootType = {\n   render(children: ReactNodeList): void,\n@@ -123,7 +123,11 @@ ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = functio\n \n     const container = root.containerInfo;\n \n-    if (!enableFloat && container.nodeType !== COMMENT_NODE) {\n+    if (\n+      !enableFloat &&\n+      !enableHostSingletons &&\n+      container.nodeType !== COMMENT_NODE\n+    ) {\n       const hostInstance = findHostInstanceWithNoPortals(root.current);\n       if (hostInstance) {\n         if (hostInstance.parentNode !== container) {\ndiff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js\nindex bcc3f15c44..6fa2a18d44 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js\n@@ -58,6 +58,16 @@ describe('DOMPluginEventSystem', () => {\n       'enableLegacyFBSupport ' +\n         (enableLegacyFBSupport ? 'enabled' : 'disabled'),\n       () => {\n+        beforeAll(() => {\n+          \/\/ These tests are run twice, once with legacyFBSupport enabled and once disabled.\n+          \/\/ The document needs to be cleaned up a bit before the second pass otherwise it is\n+          \/\/ operating in a non pristine environment\n+          document.removeChild(document.documentElement);\n+          document.appendChild(document.createElement('html'));\n+          document.documentElement.appendChild(document.createElement('head'));\n+          document.documentElement.appendChild(document.createElement('body'));\n+        });\n+\n         beforeEach(() => {\n           jest.resetModules();\n           ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n@@ -562,7 +572,6 @@ describe('DOMPluginEventSystem', () => {\n           }\n \n           ReactDOM.render(<Parent \/>, container);\n-\n           const second = document.body.lastChild;\n           expect(second.textContent).toEqual('second');\n           dispatchClickEvent(second);\ndiff --git a\/packages\/react-dom\/src\/test-utils\/ReactTestUtils.js b\/packages\/react-dom\/src\/test-utils\/ReactTestUtils.js\nindex 22dbd6f4c0..6d10bd7f4a 100644\n--- a\/packages\/react-dom\/src\/test-utils\/ReactTestUtils.js\n+++ b\/packages\/react-dom\/src\/test-utils\/ReactTestUtils.js\n@@ -14,6 +14,7 @@ import {\n   FunctionComponent,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n } from 'react-reconciler\/src\/ReactWorkTags';\n import {SyntheticEvent} from 'react-dom-bindings\/src\/events\/SyntheticEvent';\n@@ -25,6 +26,7 @@ import {\n import {enableFloat} from 'shared\/ReactFeatureFlags';\n import assign from 'shared\/assign';\n import isArray from 'shared\/isArray';\n+import {enableHostSingletons} from 'shared\/ReactFeatureFlags';\n \n \/\/ Keep in sync with ReactDOM.js:\n const SecretInternals =\n@@ -62,7 +64,8 @@ function findAllInRenderedFiberTreeInternal(fiber, test) {\n       node.tag === HostText ||\n       node.tag === ClassComponent ||\n       node.tag === FunctionComponent ||\n-      (enableFloat ? node.tag === HostResource : false)\n+      (enableFloat ? node.tag === HostResource : false) ||\n+      (enableHostSingletons ? node.tag === HostSingleton : false)\n     ) {\n       const publicInst = node.stateNode;\n       if (test(publicInst)) {\n@@ -415,7 +418,11 @@ function getParent(inst) {\n     \/\/ events to their parent. We could also go through parentNode on the\n     \/\/ host node but that wouldn't work for React Native and doesn't let us\n     \/\/ do the portal feature.\n-  } while (inst && inst.tag !== HostComponent);\n+  } while (\n+    inst &&\n+    inst.tag !== HostComponent &&\n+    (!enableHostSingletons ? true : inst.tag !== HostSingleton)\n+  );\n   if (inst) {\n     return inst;\n   }\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\nindex c0d17b3c24..a9f84cc1dc 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n@@ -326,6 +326,7 @@ export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoScopes';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoTestSelectors';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoMicrotasks';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoResources';\n+export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoSingletons';\n \n export function appendInitialChild(\n   parentInstance: Instance,\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\nindex 26855bd87e..b54dd99d3b 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n@@ -90,6 +90,7 @@ export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoScopes';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoTestSelectors';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoMicrotasks';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoResources';\n+export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoSingletons';\n \n export function appendInitialChild(\n   parentInstance: Instance,\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 46464a37f8..4b8fc08e26 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -272,6 +272,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n   }\n \n   const sharedHostConfig = {\n+    supportsSingletons: false,\n+\n     getRootHostContext() {\n       return NO_CONTEXT;\n     },\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.new.js b\/packages\/react-reconciler\/src\/ReactFiber.new.js\nindex 18a3bf721b..57e10f9af2 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.new.js\n@@ -21,7 +21,12 @@ import type {\n } from '.\/ReactFiberOffscreenComponent';\n import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.new';\n \n-import {supportsResources, isHostResourceType} from '.\/ReactFiberHostConfig';\n+import {\n+  supportsResources,\n+  supportsSingletons,\n+  isHostResourceType,\n+  isHostSingletonType,\n+} from '.\/ReactFiberHostConfig';\n import {\n   createRootStrictEffectsByDefault,\n   enableCache,\n@@ -34,6 +39,7 @@ import {\n   enableTransitionTracing,\n   enableDebugTracing,\n   enableFloat,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n import {NoFlags, Placement, StaticMask} from '.\/ReactFiberFlags';\n import {ConcurrentRoot} from '.\/ReactRootTags';\n@@ -45,6 +51,7 @@ import {\n   HostText,\n   HostPortal,\n   HostResource,\n+  HostSingleton,\n   ForwardRef,\n   Fragment,\n   Mode,\n@@ -497,10 +504,23 @@ export function createFiberFromTypeAndProps(\n       }\n     }\n   } else if (typeof type === 'string') {\n-    if (enableFloat && supportsResources) {\n+    if (\n+      enableFloat &&\n+      supportsResources &&\n+      enableHostSingletons &&\n+      supportsSingletons\n+    ) {\n+      fiberTag = isHostResourceType(type, pendingProps)\n+        ? HostResource\n+        : isHostSingletonType(type)\n+        ? HostSingleton\n+        : HostComponent;\n+    } else if (enableFloat && supportsResources) {\n       fiberTag = isHostResourceType(type, pendingProps)\n         ? HostResource\n         : HostComponent;\n+    } else if (enableHostSingletons && supportsSingletons) {\n+      fiberTag = isHostSingletonType(type) ? HostSingleton : HostComponent;\n     } else {\n       fiberTag = HostComponent;\n     }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.old.js b\/packages\/react-reconciler\/src\/ReactFiber.old.js\nindex 94e0050e8b..dac93beeec 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.old.js\n@@ -21,7 +21,12 @@ import type {\n } from '.\/ReactFiberOffscreenComponent';\n import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.old';\n \n-import {supportsResources, isHostResourceType} from '.\/ReactFiberHostConfig';\n+import {\n+  supportsResources,\n+  supportsSingletons,\n+  isHostResourceType,\n+  isHostSingletonType,\n+} from '.\/ReactFiberHostConfig';\n import {\n   createRootStrictEffectsByDefault,\n   enableCache,\n@@ -34,6 +39,7 @@ import {\n   enableTransitionTracing,\n   enableDebugTracing,\n   enableFloat,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n import {NoFlags, Placement, StaticMask} from '.\/ReactFiberFlags';\n import {ConcurrentRoot} from '.\/ReactRootTags';\n@@ -45,6 +51,7 @@ import {\n   HostText,\n   HostPortal,\n   HostResource,\n+  HostSingleton,\n   ForwardRef,\n   Fragment,\n   Mode,\n@@ -497,10 +504,23 @@ export function createFiberFromTypeAndProps(\n       }\n     }\n   } else if (typeof type === 'string') {\n-    if (enableFloat && supportsResources) {\n+    if (\n+      enableFloat &&\n+      supportsResources &&\n+      enableHostSingletons &&\n+      supportsSingletons\n+    ) {\n+      fiberTag = isHostResourceType(type, pendingProps)\n+        ? HostResource\n+        : isHostSingletonType(type)\n+        ? HostSingleton\n+        : HostComponent;\n+    } else if (enableFloat && supportsResources) {\n       fiberTag = isHostResourceType(type, pendingProps)\n         ? HostResource\n         : HostComponent;\n+    } else if (enableHostSingletons && supportsSingletons) {\n+      fiberTag = isHostSingletonType(type) ? HostSingleton : HostComponent;\n     } else {\n       fiberTag = HostComponent;\n     }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex 9e9c4bd970..66c679b424 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -37,11 +37,6 @@ import type {\n import type {UpdateQueue} from '.\/ReactFiberClassUpdateQueue.new';\n import type {RootState} from '.\/ReactFiberRoot.new';\n import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.new';\n-import {\n-  enableCPUSuspense,\n-  enableUseMutableSource,\n-  enableFloat,\n-} from 'shared\/ReactFeatureFlags';\n \n import checkPropTypes from 'shared\/checkPropTypes';\n import {\n@@ -56,6 +51,7 @@ import {\n   HostRoot,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n   HostPortal,\n   ForwardRef,\n@@ -107,6 +103,10 @@ import {\n   enableSchedulingProfiler,\n   enableTransitionTracing,\n   enableLegacyHidden,\n+  enableCPUSuspense,\n+  enableUseMutableSource,\n+  enableFloat,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n import isArray from 'shared\/isArray';\n import shallowEqual from 'shared\/shallowEqual';\n@@ -164,6 +164,7 @@ import {\n   registerSuspenseInstanceRetry,\n   supportsHydration,\n   supportsResources,\n+  supportsSingletons,\n   isPrimaryRenderer,\n   getResource,\n } from '.\/ReactFiberHostConfig';\n@@ -218,6 +219,7 @@ import {\n   enterHydrationState,\n   reenterHydrationStateFromDehydratedSuspenseInstance,\n   resetHydrationState,\n+  claimHydratableSingleton,\n   tryToClaimNextHydratableInstance,\n   warnIfHydrating,\n   queueHydrationError,\n@@ -1603,6 +1605,36 @@ function updateHostResource(current, workInProgress, renderLanes) {\n   return workInProgress.child;\n }\n \n+function updateHostSingleton(\n+  current: Fiber | null,\n+  workInProgress: Fiber,\n+  renderLanes: Lanes,\n+) {\n+  pushHostContext(workInProgress);\n+\n+  if (current === null) {\n+    claimHydratableSingleton(workInProgress);\n+  }\n+\n+  const nextChildren = workInProgress.pendingProps.children;\n+\n+  if (current === null && !getIsHydrating()) {\n+    \/\/ Similar to Portals we append Singleton children in the commit phase. So we\n+    \/\/ Track insertions even on mount.\n+    \/\/ TODO: Consider unifying this with how the root works.\n+    workInProgress.child = reconcileChildFibers(\n+      workInProgress,\n+      null,\n+      nextChildren,\n+      renderLanes,\n+    );\n+  } else {\n+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n+  }\n+  markRef(current, workInProgress);\n+  return workInProgress.child;\n+}\n+\n function updateHostText(current, workInProgress) {\n   if (current === null) {\n     tryToClaimNextHydratableInstance(workInProgress);\n@@ -3681,6 +3713,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(\n       resetHydrationState();\n       break;\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent:\n       pushHostContext(workInProgress);\n       break;\n@@ -4020,6 +4053,11 @@ function beginWork(\n         return updateHostResource(current, workInProgress, renderLanes);\n       }\n     \/\/ eslint-disable-next-line no-fallthrough\n+    case HostSingleton:\n+      if (enableHostSingletons && supportsSingletons) {\n+        return updateHostSingleton(current, workInProgress, renderLanes);\n+      }\n+    \/\/ eslint-disable-next-line no-fallthrough\n     case HostComponent:\n       return updateHostComponent(current, workInProgress, renderLanes);\n     case HostText:\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex bd12a98980..e5c3f1f4cb 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -37,11 +37,6 @@ import type {\n import type {UpdateQueue} from '.\/ReactFiberClassUpdateQueue.old';\n import type {RootState} from '.\/ReactFiberRoot.old';\n import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.old';\n-import {\n-  enableCPUSuspense,\n-  enableUseMutableSource,\n-  enableFloat,\n-} from 'shared\/ReactFeatureFlags';\n \n import checkPropTypes from 'shared\/checkPropTypes';\n import {\n@@ -56,6 +51,7 @@ import {\n   HostRoot,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n   HostPortal,\n   ForwardRef,\n@@ -107,6 +103,10 @@ import {\n   enableSchedulingProfiler,\n   enableTransitionTracing,\n   enableLegacyHidden,\n+  enableCPUSuspense,\n+  enableUseMutableSource,\n+  enableFloat,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n import isArray from 'shared\/isArray';\n import shallowEqual from 'shared\/shallowEqual';\n@@ -164,6 +164,7 @@ import {\n   registerSuspenseInstanceRetry,\n   supportsHydration,\n   supportsResources,\n+  supportsSingletons,\n   isPrimaryRenderer,\n   getResource,\n } from '.\/ReactFiberHostConfig';\n@@ -218,6 +219,7 @@ import {\n   enterHydrationState,\n   reenterHydrationStateFromDehydratedSuspenseInstance,\n   resetHydrationState,\n+  claimHydratableSingleton,\n   tryToClaimNextHydratableInstance,\n   warnIfHydrating,\n   queueHydrationError,\n@@ -1603,6 +1605,36 @@ function updateHostResource(current, workInProgress, renderLanes) {\n   return workInProgress.child;\n }\n \n+function updateHostSingleton(\n+  current: Fiber | null,\n+  workInProgress: Fiber,\n+  renderLanes: Lanes,\n+) {\n+  pushHostContext(workInProgress);\n+\n+  if (current === null) {\n+    claimHydratableSingleton(workInProgress);\n+  }\n+\n+  const nextChildren = workInProgress.pendingProps.children;\n+\n+  if (current === null && !getIsHydrating()) {\n+    \/\/ Similar to Portals we append Singleton children in the commit phase. So we\n+    \/\/ Track insertions even on mount.\n+    \/\/ TODO: Consider unifying this with how the root works.\n+    workInProgress.child = reconcileChildFibers(\n+      workInProgress,\n+      null,\n+      nextChildren,\n+      renderLanes,\n+    );\n+  } else {\n+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n+  }\n+  markRef(current, workInProgress);\n+  return workInProgress.child;\n+}\n+\n function updateHostText(current, workInProgress) {\n   if (current === null) {\n     tryToClaimNextHydratableInstance(workInProgress);\n@@ -3681,6 +3713,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(\n       resetHydrationState();\n       break;\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent:\n       pushHostContext(workInProgress);\n       break;\n@@ -4020,6 +4053,11 @@ function beginWork(\n         return updateHostResource(current, workInProgress, renderLanes);\n       }\n     \/\/ eslint-disable-next-line no-fallthrough\n+    case HostSingleton:\n+      if (enableHostSingletons && supportsSingletons) {\n+        return updateHostSingleton(current, workInProgress, renderLanes);\n+      }\n+    \/\/ eslint-disable-next-line no-fallthrough\n     case HostComponent:\n       return updateHostComponent(current, workInProgress, renderLanes);\n     case HostText:\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\nindex e0bd907706..343cc152d7 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n@@ -53,6 +53,7 @@ import {\n   enableStrictEffects,\n   enableFloat,\n   enableLegacyHidden,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n import {\n   FunctionComponent,\n@@ -61,6 +62,7 @@ import {\n   HostRoot,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n   HostPortal,\n   Profiler,\n@@ -120,6 +122,7 @@ import {\n   supportsPersistence,\n   supportsHydration,\n   supportsResources,\n+  supportsSingletons,\n   commitMount,\n   commitUpdate,\n   resetTextContent,\n@@ -147,6 +150,9 @@ import {\n   detachDeletedInstance,\n   acquireResource,\n   releaseResource,\n+  clearSingleton,\n+  acquireSingletonInstance,\n+  releaseSingletonInstance,\n } from '.\/ReactFiberHostConfig';\n import {\n   captureCommitPhaseError,\n@@ -501,6 +507,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {\n     }\n     case HostComponent:\n     case HostResource:\n+    case HostSingleton:\n     case HostText:\n     case HostPortal:\n     case IncompleteClassComponent:\n@@ -1053,6 +1060,7 @@ function commitLayoutEffectOnFiber(\n           let instance = null;\n           if (finishedWork.child !== null) {\n             switch (finishedWork.child.tag) {\n+              case HostSingleton:\n               case HostComponent:\n                 instance = getPublicInstance(finishedWork.child.stateNode);\n                 break;\n@@ -1098,6 +1106,7 @@ function commitLayoutEffectOnFiber(\n       }\n     }\n     \/\/ eslint-disable-next-line-no-fallthrough\n+    case HostSingleton:\n     case HostComponent: {\n       recursivelyTraverseLayoutEffects(\n         finishedRoot,\n@@ -1487,7 +1496,12 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {\n     while (true) {\n       if (\n         node.tag === HostComponent ||\n-        (enableFloat && supportsResources ? node.tag === HostResource : false)\n+        (enableFloat && supportsResources\n+          ? node.tag === HostResource\n+          : false) ||\n+        (enableHostSingletons && supportsSingletons\n+          ? node.tag === HostSingleton\n+          : false)\n       ) {\n         if (hostSubtreeRoot === null) {\n           hostSubtreeRoot = node;\n@@ -1561,6 +1575,7 @@ function commitAttachRef(finishedWork: Fiber) {\n     let instanceToUse;\n     switch (finishedWork.tag) {\n       case HostResource:\n+      case HostSingleton:\n       case HostComponent:\n         instanceToUse = getPublicInstance(instance);\n         break;\n@@ -1765,8 +1780,11 @@ function isHostParent(fiber: Fiber): boolean {\n   return (\n     fiber.tag === HostComponent ||\n     fiber.tag === HostRoot ||\n-    fiber.tag === HostPortal ||\n-    (enableFloat && supportsResources ? fiber.tag === HostResource : false)\n+    (enableFloat && supportsResources ? fiber.tag === HostResource : false) ||\n+    (enableHostSingletons && supportsSingletons\n+      ? fiber.tag === HostSingleton\n+      : false) ||\n+    fiber.tag === HostPortal\n   );\n }\n \n@@ -1792,6 +1810,9 @@ function getHostSibling(fiber: Fiber): ?Instance {\n     while (\n       node.tag !== HostComponent &&\n       node.tag !== HostText &&\n+      (!(enableHostSingletons && supportsSingletons)\n+        ? true\n+        : node.tag !== HostSingleton) &&\n       node.tag !== DehydratedFragment\n     ) {\n       \/\/ If it is not host node and, we might have a host node inside it.\n@@ -1822,11 +1843,29 @@ function commitPlacement(finishedWork: Fiber): void {\n     return;\n   }\n \n+  if (enableHostSingletons && supportsSingletons) {\n+    if (finishedWork.tag === HostSingleton) {\n+      \/\/ Singletons are already in the Host and don't need to be placed\n+      \/\/ Since they operate somewhat like Portals though their children will\n+      \/\/ have Placement and will get placed inside them\n+      return;\n+    }\n+  }\n   \/\/ Recursively insert all host nodes into the parent.\n   const parentFiber = getHostParentFiber(finishedWork);\n \n-  \/\/ Note: these two variables *must* always be updated together.\n   switch (parentFiber.tag) {\n+    case HostSingleton: {\n+      if (enableHostSingletons && supportsSingletons) {\n+        const parent: Instance = parentFiber.stateNode;\n+        const before = getHostSibling(finishedWork);\n+        \/\/ We only have the top Fiber that was inserted but we need to recurse down its\n+        \/\/ children to find all the terminal nodes.\n+        insertOrAppendPlacementNode(finishedWork, before, parent);\n+        break;\n+      }\n+    }\n+    \/\/ eslint-disable-next-line no-fallthrough\n     case HostComponent: {\n       const parent: Instance = parentFiber.stateNode;\n       if (parentFiber.flags & ContentReset) {\n@@ -1872,10 +1911,14 @@ function insertOrAppendPlacementNodeIntoContainer(\n     } else {\n       appendChildToContainer(parent, stateNode);\n     }\n-  } else if (tag === HostPortal) {\n+  } else if (\n+    tag === HostPortal ||\n+    (enableHostSingletons && supportsSingletons ? tag === HostSingleton : false)\n+  ) {\n     \/\/ If the insertion itself is a portal, then we don't want to traverse\n     \/\/ down its children. Instead, we'll get insertions from each child in\n     \/\/ the portal directly.\n+    \/\/ If the insertion is a HostSingleton then it will be placed independently\n   } else {\n     const child = node.child;\n     if (child !== null) {\n@@ -1903,10 +1946,14 @@ function insertOrAppendPlacementNode(\n     } else {\n       appendChild(parent, stateNode);\n     }\n-  } else if (tag === HostPortal) {\n+  } else if (\n+    tag === HostPortal ||\n+    (enableHostSingletons && supportsSingletons ? tag === HostSingleton : false)\n+  ) {\n     \/\/ If the insertion itself is a portal, then we don't want to traverse\n     \/\/ down its children. Instead, we'll get insertions from each child in\n     \/\/ the portal directly.\n+    \/\/ If the insertion is a HostSingleton then it will be placed independently\n   } else {\n     const child = node.child;\n     if (child !== null) {\n@@ -1954,6 +2001,7 @@ function commitDeletionEffects(\n     let parent: null | Fiber = returnFiber;\n     findParent: while (parent !== null) {\n       switch (parent.tag) {\n+        case HostSingleton:\n         case HostComponent: {\n           hostParent = parent.stateNode;\n           hostParentIsContainer = false;\n@@ -2019,14 +2067,41 @@ function commitDeletionEffectsOnFiber(\n         if (!offscreenSubtreeWasHidden) {\n           safelyDetachRef(deletedFiber, nearestMountedAncestor);\n         }\n+        recursivelyTraverseDeletionEffects(\n+          finishedRoot,\n+          nearestMountedAncestor,\n+          deletedFiber,\n+        );\n+        releaseResource(deletedFiber.memoizedState);\n+        return;\n+      }\n+    }\n+    \/\/ eslint-disable-next-line no-fallthrough\n+    case HostSingleton: {\n+      if (enableHostSingletons && supportsSingletons) {\n+        if (!offscreenSubtreeWasHidden) {\n+          safelyDetachRef(deletedFiber, nearestMountedAncestor);\n+        }\n \n+        const prevHostParent = hostParent;\n+        const prevHostParentIsContainer = hostParentIsContainer;\n+        hostParent = deletedFiber.stateNode;\n         recursivelyTraverseDeletionEffects(\n           finishedRoot,\n           nearestMountedAncestor,\n           deletedFiber,\n         );\n \n-        releaseResource(deletedFiber.memoizedState);\n+        \/\/ Normally this is called in passive unmount effect phase however with\n+        \/\/ HostSingleton we warn if you acquire one that is already associated to\n+        \/\/ a different fiber. To increase our chances of avoiding this, specifically\n+        \/\/ if you keyed a HostSingleton so there will be a delete followed by a Placement\n+        \/\/ we treat detach eagerly here\n+        releaseSingletonInstance(deletedFiber.stateNode);\n+\n+        hostParent = prevHostParent;\n+        hostParentIsContainer = prevHostParentIsContainer;\n+\n         return;\n       }\n     }\n@@ -2543,6 +2618,26 @@ function commitMutationEffectsOnFiber(\n       }\n     }\n     \/\/ eslint-disable-next-line-no-fallthrough\n+    case HostSingleton: {\n+      if (enableHostSingletons && supportsSingletons) {\n+        if (flags & Update) {\n+          const previousWork = finishedWork.alternate;\n+          if (previousWork === null) {\n+            const singleton = finishedWork.stateNode;\n+            const props = finishedWork.memoizedProps;\n+            \/\/ This was a new mount, we need to clear and set initial properties\n+            clearSingleton(singleton);\n+            acquireSingletonInstance(\n+              finishedWork.type,\n+              props,\n+              singleton,\n+              finishedWork,\n+            );\n+          }\n+        }\n+      }\n+    }\n+    \/\/ eslint-disable-next-line-no-fallthrough\n     case HostComponent: {\n       recursivelyTraverseMutationEffects(root, finishedWork, lanes);\n       commitReconciliationEffects(finishedWork);\n@@ -2935,6 +3030,7 @@ export function disappearLayoutEffects(finishedWork: Fiber) {\n       break;\n     }\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent: {\n       \/\/ TODO (Offscreen) Check: flags & RefStatic\n       safelyDetachRef(finishedWork, finishedWork.return);\n@@ -3035,6 +3131,7 @@ export function reappearLayoutEffects(\n     \/\/  ...\n     \/\/ }\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent: {\n       recursivelyTraverseReappearLayoutEffects(\n         finishedRoot,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\nindex 0f449a81dc..0dac9e775a 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n@@ -53,6 +53,7 @@ import {\n   enableStrictEffects,\n   enableFloat,\n   enableLegacyHidden,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n import {\n   FunctionComponent,\n@@ -61,6 +62,7 @@ import {\n   HostRoot,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n   HostPortal,\n   Profiler,\n@@ -120,6 +122,7 @@ import {\n   supportsPersistence,\n   supportsHydration,\n   supportsResources,\n+  supportsSingletons,\n   commitMount,\n   commitUpdate,\n   resetTextContent,\n@@ -147,6 +150,9 @@ import {\n   detachDeletedInstance,\n   acquireResource,\n   releaseResource,\n+  clearSingleton,\n+  acquireSingletonInstance,\n+  releaseSingletonInstance,\n } from '.\/ReactFiberHostConfig';\n import {\n   captureCommitPhaseError,\n@@ -501,6 +507,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {\n     }\n     case HostComponent:\n     case HostResource:\n+    case HostSingleton:\n     case HostText:\n     case HostPortal:\n     case IncompleteClassComponent:\n@@ -1053,6 +1060,7 @@ function commitLayoutEffectOnFiber(\n           let instance = null;\n           if (finishedWork.child !== null) {\n             switch (finishedWork.child.tag) {\n+              case HostSingleton:\n               case HostComponent:\n                 instance = getPublicInstance(finishedWork.child.stateNode);\n                 break;\n@@ -1098,6 +1106,7 @@ function commitLayoutEffectOnFiber(\n       }\n     }\n     \/\/ eslint-disable-next-line-no-fallthrough\n+    case HostSingleton:\n     case HostComponent: {\n       recursivelyTraverseLayoutEffects(\n         finishedRoot,\n@@ -1487,7 +1496,12 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {\n     while (true) {\n       if (\n         node.tag === HostComponent ||\n-        (enableFloat && supportsResources ? node.tag === HostResource : false)\n+        (enableFloat && supportsResources\n+          ? node.tag === HostResource\n+          : false) ||\n+        (enableHostSingletons && supportsSingletons\n+          ? node.tag === HostSingleton\n+          : false)\n       ) {\n         if (hostSubtreeRoot === null) {\n           hostSubtreeRoot = node;\n@@ -1561,6 +1575,7 @@ function commitAttachRef(finishedWork: Fiber) {\n     let instanceToUse;\n     switch (finishedWork.tag) {\n       case HostResource:\n+      case HostSingleton:\n       case HostComponent:\n         instanceToUse = getPublicInstance(instance);\n         break;\n@@ -1765,8 +1780,11 @@ function isHostParent(fiber: Fiber): boolean {\n   return (\n     fiber.tag === HostComponent ||\n     fiber.tag === HostRoot ||\n-    fiber.tag === HostPortal ||\n-    (enableFloat && supportsResources ? fiber.tag === HostResource : false)\n+    (enableFloat && supportsResources ? fiber.tag === HostResource : false) ||\n+    (enableHostSingletons && supportsSingletons\n+      ? fiber.tag === HostSingleton\n+      : false) ||\n+    fiber.tag === HostPortal\n   );\n }\n \n@@ -1792,6 +1810,9 @@ function getHostSibling(fiber: Fiber): ?Instance {\n     while (\n       node.tag !== HostComponent &&\n       node.tag !== HostText &&\n+      (!(enableHostSingletons && supportsSingletons)\n+        ? true\n+        : node.tag !== HostSingleton) &&\n       node.tag !== DehydratedFragment\n     ) {\n       \/\/ If it is not host node and, we might have a host node inside it.\n@@ -1822,11 +1843,29 @@ function commitPlacement(finishedWork: Fiber): void {\n     return;\n   }\n \n+  if (enableHostSingletons && supportsSingletons) {\n+    if (finishedWork.tag === HostSingleton) {\n+      \/\/ Singletons are already in the Host and don't need to be placed\n+      \/\/ Since they operate somewhat like Portals though their children will\n+      \/\/ have Placement and will get placed inside them\n+      return;\n+    }\n+  }\n   \/\/ Recursively insert all host nodes into the parent.\n   const parentFiber = getHostParentFiber(finishedWork);\n \n-  \/\/ Note: these two variables *must* always be updated together.\n   switch (parentFiber.tag) {\n+    case HostSingleton: {\n+      if (enableHostSingletons && supportsSingletons) {\n+        const parent: Instance = parentFiber.stateNode;\n+        const before = getHostSibling(finishedWork);\n+        \/\/ We only have the top Fiber that was inserted but we need to recurse down its\n+        \/\/ children to find all the terminal nodes.\n+        insertOrAppendPlacementNode(finishedWork, before, parent);\n+        break;\n+      }\n+    }\n+    \/\/ eslint-disable-next-line no-fallthrough\n     case HostComponent: {\n       const parent: Instance = parentFiber.stateNode;\n       if (parentFiber.flags & ContentReset) {\n@@ -1872,10 +1911,14 @@ function insertOrAppendPlacementNodeIntoContainer(\n     } else {\n       appendChildToContainer(parent, stateNode);\n     }\n-  } else if (tag === HostPortal) {\n+  } else if (\n+    tag === HostPortal ||\n+    (enableHostSingletons && supportsSingletons ? tag === HostSingleton : false)\n+  ) {\n     \/\/ If the insertion itself is a portal, then we don't want to traverse\n     \/\/ down its children. Instead, we'll get insertions from each child in\n     \/\/ the portal directly.\n+    \/\/ If the insertion is a HostSingleton then it will be placed independently\n   } else {\n     const child = node.child;\n     if (child !== null) {\n@@ -1903,10 +1946,14 @@ function insertOrAppendPlacementNode(\n     } else {\n       appendChild(parent, stateNode);\n     }\n-  } else if (tag === HostPortal) {\n+  } else if (\n+    tag === HostPortal ||\n+    (enableHostSingletons && supportsSingletons ? tag === HostSingleton : false)\n+  ) {\n     \/\/ If the insertion itself is a portal, then we don't want to traverse\n     \/\/ down its children. Instead, we'll get insertions from each child in\n     \/\/ the portal directly.\n+    \/\/ If the insertion is a HostSingleton then it will be placed independently\n   } else {\n     const child = node.child;\n     if (child !== null) {\n@@ -1954,6 +2001,7 @@ function commitDeletionEffects(\n     let parent: null | Fiber = returnFiber;\n     findParent: while (parent !== null) {\n       switch (parent.tag) {\n+        case HostSingleton:\n         case HostComponent: {\n           hostParent = parent.stateNode;\n           hostParentIsContainer = false;\n@@ -2019,14 +2067,41 @@ function commitDeletionEffectsOnFiber(\n         if (!offscreenSubtreeWasHidden) {\n           safelyDetachRef(deletedFiber, nearestMountedAncestor);\n         }\n+        recursivelyTraverseDeletionEffects(\n+          finishedRoot,\n+          nearestMountedAncestor,\n+          deletedFiber,\n+        );\n+        releaseResource(deletedFiber.memoizedState);\n+        return;\n+      }\n+    }\n+    \/\/ eslint-disable-next-line no-fallthrough\n+    case HostSingleton: {\n+      if (enableHostSingletons && supportsSingletons) {\n+        if (!offscreenSubtreeWasHidden) {\n+          safelyDetachRef(deletedFiber, nearestMountedAncestor);\n+        }\n \n+        const prevHostParent = hostParent;\n+        const prevHostParentIsContainer = hostParentIsContainer;\n+        hostParent = deletedFiber.stateNode;\n         recursivelyTraverseDeletionEffects(\n           finishedRoot,\n           nearestMountedAncestor,\n           deletedFiber,\n         );\n \n-        releaseResource(deletedFiber.memoizedState);\n+        \/\/ Normally this is called in passive unmount effect phase however with\n+        \/\/ HostSingleton we warn if you acquire one that is already associated to\n+        \/\/ a different fiber. To increase our chances of avoiding this, specifically\n+        \/\/ if you keyed a HostSingleton so there will be a delete followed by a Placement\n+        \/\/ we treat detach eagerly here\n+        releaseSingletonInstance(deletedFiber.stateNode);\n+\n+        hostParent = prevHostParent;\n+        hostParentIsContainer = prevHostParentIsContainer;\n+\n         return;\n       }\n     }\n@@ -2543,6 +2618,26 @@ function commitMutationEffectsOnFiber(\n       }\n     }\n     \/\/ eslint-disable-next-line-no-fallthrough\n+    case HostSingleton: {\n+      if (enableHostSingletons && supportsSingletons) {\n+        if (flags & Update) {\n+          const previousWork = finishedWork.alternate;\n+          if (previousWork === null) {\n+            const singleton = finishedWork.stateNode;\n+            const props = finishedWork.memoizedProps;\n+            \/\/ This was a new mount, we need to clear and set initial properties\n+            clearSingleton(singleton);\n+            acquireSingletonInstance(\n+              finishedWork.type,\n+              props,\n+              singleton,\n+              finishedWork,\n+            );\n+          }\n+        }\n+      }\n+    }\n+    \/\/ eslint-disable-next-line-no-fallthrough\n     case HostComponent: {\n       recursivelyTraverseMutationEffects(root, finishedWork, lanes);\n       commitReconciliationEffects(finishedWork);\n@@ -2935,6 +3030,7 @@ export function disappearLayoutEffects(finishedWork: Fiber) {\n       break;\n     }\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent: {\n       \/\/ TODO (Offscreen) Check: flags & RefStatic\n       safelyDetachRef(finishedWork, finishedWork.return);\n@@ -3035,6 +3131,7 @@ export function reappearLayoutEffects(\n     \/\/  ...\n     \/\/ }\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent: {\n       recursivelyTraverseReappearLayoutEffects(\n         finishedRoot,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\nindex ef85cb32be..195a6f8d54 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n@@ -33,6 +33,7 @@ import type {Cache} from '.\/ReactFiberCacheComponent.new';\n import {\n   enableSuspenseAvoidThisFallback,\n   enableLegacyHidden,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n \n import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from '.\/ReactMutableSource.new';\n@@ -46,6 +47,7 @@ import {\n   HostRoot,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n   HostPortal,\n   ContextProvider,\n@@ -88,12 +90,14 @@ import {\n import {\n   createInstance,\n   createTextInstance,\n+  resolveSingletonInstance,\n   appendInitialChild,\n   finalizeInitialChildren,\n   prepareUpdate,\n   supportsMutation,\n   supportsPersistence,\n   supportsResources,\n+  supportsSingletons,\n   cloneInstance,\n   cloneHiddenInstance,\n   cloneHiddenTextInstance,\n@@ -227,10 +231,16 @@ if (supportsMutation) {\n     while (node !== null) {\n       if (node.tag === HostComponent || node.tag === HostText) {\n         appendInitialChild(parent, node.stateNode);\n-      } else if (node.tag === HostPortal) {\n+      } else if (\n+        node.tag === HostPortal ||\n+        (enableHostSingletons && supportsSingletons\n+          ? node.tag === HostSingleton\n+          : false)\n+      ) {\n         \/\/ If we have a portal child, then we don't want to traverse\n         \/\/ down its children. Instead, we'll get insertions from each child in\n         \/\/ the portal directly.\n+        \/\/ If we have a HostSingleton it will be placed independently\n       } else if (node.child !== null) {\n         node.child.return = node;\n         node = node.child;\n@@ -984,6 +994,59 @@ function completeWork(\n       }\n     }\n     \/\/ eslint-disable-next-line-no-fallthrough\n+    case HostSingleton: {\n+      if (enableHostSingletons && supportsSingletons) {\n+        popHostContext(workInProgress);\n+        const rootContainerInstance = getRootHostContainer();\n+        const type = workInProgress.type;\n+        if (current !== null && workInProgress.stateNode != null) {\n+          updateHostComponent(current, workInProgress, type, newProps);\n+\n+          if (current.ref !== workInProgress.ref) {\n+            markRef(workInProgress);\n+          }\n+        } else {\n+          if (!newProps) {\n+            if (workInProgress.stateNode === null) {\n+              throw new Error(\n+                'We must have new props for new mounts. This error is likely ' +\n+                  'caused by a bug in React. Please file an issue.',\n+              );\n+            }\n+\n+            \/\/ This can happen when we abort work.\n+            bubbleProperties(workInProgress);\n+            return null;\n+          }\n+\n+          const currentHostContext = getHostContext();\n+          const wasHydrated = popHydrationState(workInProgress);\n+          if (wasHydrated) {\n+            \/\/ We ignore the boolean indicating there is an updateQueue because\n+            \/\/ it is used only to set text children and HostSingletons do not\n+            \/\/ use them.\n+            prepareToHydrateHostInstance(workInProgress, currentHostContext);\n+          } else {\n+            workInProgress.stateNode = resolveSingletonInstance(\n+              type,\n+              newProps,\n+              rootContainerInstance,\n+              currentHostContext,\n+              true,\n+            );\n+            markUpdate(workInProgress);\n+          }\n+\n+          if (workInProgress.ref !== null) {\n+            \/\/ If there is a ref on a host node we need to schedule a callback\n+            markRef(workInProgress);\n+          }\n+        }\n+        bubbleProperties(workInProgress);\n+        return null;\n+      }\n+    }\n+    \/\/ eslint-disable-next-line-no-fallthrough\n     case HostComponent: {\n       popHostContext(workInProgress);\n       const type = workInProgress.type;\n@@ -1032,9 +1095,7 @@ function completeWork(\n             currentHostContext,\n             workInProgress,\n           );\n-\n           appendAllChildren(instance, workInProgress, false, false);\n-\n           workInProgress.stateNode = instance;\n \n           \/\/ Certain renderers require commit-time effects for initial mount.\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\nindex be5ff0d1ab..1ead0a8902 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n@@ -33,6 +33,7 @@ import type {Cache} from '.\/ReactFiberCacheComponent.old';\n import {\n   enableSuspenseAvoidThisFallback,\n   enableLegacyHidden,\n+  enableHostSingletons,\n } from 'shared\/ReactFeatureFlags';\n \n import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from '.\/ReactMutableSource.old';\n@@ -46,6 +47,7 @@ import {\n   HostRoot,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n   HostPortal,\n   ContextProvider,\n@@ -88,12 +90,14 @@ import {\n import {\n   createInstance,\n   createTextInstance,\n+  resolveSingletonInstance,\n   appendInitialChild,\n   finalizeInitialChildren,\n   prepareUpdate,\n   supportsMutation,\n   supportsPersistence,\n   supportsResources,\n+  supportsSingletons,\n   cloneInstance,\n   cloneHiddenInstance,\n   cloneHiddenTextInstance,\n@@ -227,10 +231,16 @@ if (supportsMutation) {\n     while (node !== null) {\n       if (node.tag === HostComponent || node.tag === HostText) {\n         appendInitialChild(parent, node.stateNode);\n-      } else if (node.tag === HostPortal) {\n+      } else if (\n+        node.tag === HostPortal ||\n+        (enableHostSingletons && supportsSingletons\n+          ? node.tag === HostSingleton\n+          : false)\n+      ) {\n         \/\/ If we have a portal child, then we don't want to traverse\n         \/\/ down its children. Instead, we'll get insertions from each child in\n         \/\/ the portal directly.\n+        \/\/ If we have a HostSingleton it will be placed independently\n       } else if (node.child !== null) {\n         node.child.return = node;\n         node = node.child;\n@@ -984,6 +994,59 @@ function completeWork(\n       }\n     }\n     \/\/ eslint-disable-next-line-no-fallthrough\n+    case HostSingleton: {\n+      if (enableHostSingletons && supportsSingletons) {\n+        popHostContext(workInProgress);\n+        const rootContainerInstance = getRootHostContainer();\n+        const type = workInProgress.type;\n+        if (current !== null && workInProgress.stateNode != null) {\n+          updateHostComponent(current, workInProgress, type, newProps);\n+\n+          if (current.ref !== workInProgress.ref) {\n+            markRef(workInProgress);\n+          }\n+        } else {\n+          if (!newProps) {\n+            if (workInProgress.stateNode === null) {\n+              throw new Error(\n+                'We must have new props for new mounts. This error is likely ' +\n+                  'caused by a bug in React. Please file an issue.',\n+              );\n+            }\n+\n+            \/\/ This can happen when we abort work.\n+            bubbleProperties(workInProgress);\n+            return null;\n+          }\n+\n+          const currentHostContext = getHostContext();\n+          const wasHydrated = popHydrationState(workInProgress);\n+          if (wasHydrated) {\n+            \/\/ We ignore the boolean indicating there is an updateQueue because\n+            \/\/ it is used only to set text children and HostSingletons do not\n+            \/\/ use them.\n+            prepareToHydrateHostInstance(workInProgress, currentHostContext);\n+          } else {\n+            workInProgress.stateNode = resolveSingletonInstance(\n+              type,\n+              newProps,\n+              rootContainerInstance,\n+              currentHostContext,\n+              true,\n+            );\n+            markUpdate(workInProgress);\n+          }\n+\n+          if (workInProgress.ref !== null) {\n+            \/\/ If there is a ref on a host node we need to schedule a callback\n+            markRef(workInProgress);\n+          }\n+        }\n+        bubbleProperties(workInProgress);\n+        return null;\n+      }\n+    }\n+    \/\/ eslint-disable-next-line-no-fallthrough\n     case HostComponent: {\n       popHostContext(workInProgress);\n       const type = workInProgress.type;\n@@ -1032,9 +1095,7 @@ function completeWork(\n             currentHostContext,\n             workInProgress,\n           );\n-\n           appendAllChildren(instance, workInProgress, false, false);\n-\n           workInProgress.stateNode = instance;\n \n           \/\/ Certain renderers require commit-time effects for initial mount.\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberComponentStack.js b\/packages\/react-reconciler\/src\/ReactFiberComponentStack.js\nindex 354aca5716..ea16c1c560 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberComponentStack.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberComponentStack.js\n@@ -12,6 +12,7 @@ import type {Fiber} from '.\/ReactInternalTypes';\n import {\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   LazyComponent,\n   SuspenseComponent,\n   SuspenseListComponent,\n@@ -36,6 +37,7 @@ function describeFiber(fiber: Fiber): string {\n   const source = __DEV__ ? fiber._debugSource : null;\n   switch (fiber.tag) {\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent:\n       return describeBuiltInComponentFrame(fiber.type, source, owner);\n     case LazyComponent:\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHostConfigWithNoSingletons.js b\/packages\/react-reconciler\/src\/ReactFiberHostConfigWithNoSingletons.js\nnew file mode 100644\nindex 0000000000..a20af2a2cd\n--- \/dev\/null\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHostConfigWithNoSingletons.js\n@@ -0,0 +1,27 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+\/\/ Renderers that don't support mutation\n+\/\/ can re-export everything from this module.\n+\n+function shim(...args: any) {\n+  throw new Error(\n+    'The current renderer does not support Singletons. ' +\n+      'This error is likely caused by a bug in React. ' +\n+      'Please file an issue.',\n+  );\n+}\n+\n+\/\/ Resources (when unsupported)\n+export const supportsSingletons = false;\n+export const resolveSingletonInstance = shim;\n+export const clearSingleton = shim;\n+export const acquireSingletonInstance = shim;\n+export const releaseSingletonInstance = shim;\n+export const isHostSingletonType = shim;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHotReloading.new.js b\/packages\/react-reconciler\/src\/ReactFiberHotReloading.new.js\nindex 32ddb28afa..fe3fe10554 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHotReloading.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHotReloading.new.js\n@@ -23,6 +23,7 @@ import type {\n   ScheduleRoot,\n } from '.\/ReactFiberHotReloading';\n \n+import {enableHostSingletons, enableFloat} from 'shared\/ReactFeatureFlags';\n import {\n   flushSync,\n   scheduleUpdateOnFiber,\n@@ -38,6 +39,7 @@ import {\n   ForwardRef,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostPortal,\n   HostRoot,\n   MemoComponent,\n@@ -48,7 +50,7 @@ import {\n   REACT_MEMO_TYPE,\n   REACT_LAZY_TYPE,\n } from 'shared\/ReactSymbols';\n-import {enableFloat} from 'shared\/ReactFeatureFlags';\n+import {supportsSingletons} from '.\/ReactFiberHostConfig';\n \n let resolveFamily: RefreshHandler | null = null;\n let failedBoundaries: WeakSet<Fiber> | null = null;\n@@ -425,6 +427,7 @@ function findHostInstancesForFiberShallowly(\n     let node = fiber;\n     while (true) {\n       switch (node.tag) {\n+        case HostSingleton:\n         case HostComponent:\n           hostInstances.add(node.stateNode);\n           return;\n@@ -453,7 +456,10 @@ function findChildHostInstancesForFiberShallowly(\n     while (true) {\n       if (\n         node.tag === HostComponent ||\n-        (enableFloat ? node.tag === HostResource : false)\n+        (enableFloat ? node.tag === HostResource : false) ||\n+        (enableHostSingletons && supportsSingletons\n+          ? node.tag === HostSingleton\n+          : false)\n       ) {\n         \/\/ We got a match.\n         foundHostInstances = true;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHotReloading.old.js b\/packages\/react-reconciler\/src\/ReactFiberHotReloading.old.js\nindex 0b553eaad3..b5172f9a4f 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHotReloading.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHotReloading.old.js\n@@ -23,6 +23,7 @@ import type {\n   ScheduleRoot,\n } from '.\/ReactFiberHotReloading';\n \n+import {enableHostSingletons, enableFloat} from 'shared\/ReactFeatureFlags';\n import {\n   flushSync,\n   scheduleUpdateOnFiber,\n@@ -38,6 +39,7 @@ import {\n   ForwardRef,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostPortal,\n   HostRoot,\n   MemoComponent,\n@@ -48,7 +50,7 @@ import {\n   REACT_MEMO_TYPE,\n   REACT_LAZY_TYPE,\n } from 'shared\/ReactSymbols';\n-import {enableFloat} from 'shared\/ReactFeatureFlags';\n+import {supportsSingletons} from '.\/ReactFiberHostConfig';\n \n let resolveFamily: RefreshHandler | null = null;\n let failedBoundaries: WeakSet<Fiber> | null = null;\n@@ -425,6 +427,7 @@ function findHostInstancesForFiberShallowly(\n     let node = fiber;\n     while (true) {\n       switch (node.tag) {\n+        case HostSingleton:\n         case HostComponent:\n           hostInstances.add(node.stateNode);\n           return;\n@@ -453,7 +456,10 @@ function findChildHostInstancesForFiberShallowly(\n     while (true) {\n       if (\n         node.tag === HostComponent ||\n-        (enableFloat ? node.tag === HostResource : false)\n+        (enableFloat ? node.tag === HostResource : false) ||\n+        (enableHostSingletons && supportsSingletons\n+          ? node.tag === HostSingleton\n+          : false)\n       ) {\n         \/\/ We got a match.\n         foundHostInstances = true;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.new.js b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.new.js\nindex 82df8620e0..8c25c6ab22 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.new.js\n@@ -23,6 +23,7 @@ import type {CapturedValue} from '.\/ReactCapturedValue';\n \n import {\n   HostComponent,\n+  HostSingleton,\n   HostText,\n   HostRoot,\n   SuspenseComponent,\n@@ -34,6 +35,7 @@ import {\n   NoFlags,\n   DidCapture,\n } from '.\/ReactFiberFlags';\n+import {enableHostSingletons} from 'shared\/ReactFeatureFlags';\n \n import {\n   createFiberFromHostInstanceForDeletion,\n@@ -42,6 +44,7 @@ import {\n import {\n   shouldSetTextContent,\n   supportsHydration,\n+  supportsSingletons,\n   canHydrateInstance,\n   canHydrateTextInstance,\n   canHydrateSuspenseInstance,\n@@ -68,6 +71,7 @@ import {\n   didNotFindHydratableInstance,\n   didNotFindHydratableTextInstance,\n   didNotFindHydratableSuspenseInstance,\n+  resolveSingletonInstance,\n } from '.\/ReactFiberHostConfig';\n import {OffscreenLane} from '.\/ReactFiberLane.new';\n import {\n@@ -75,6 +79,10 @@ import {\n   restoreSuspendedTreeContext,\n } from '.\/ReactFiberTreeContext.new';\n import {queueRecoverableErrors} from '.\/ReactFiberWorkLoop.new';\n+import {\n+  getRootHostContainer,\n+  getHostContext,\n+} from '.\/ReactFiberHostContext.new';\n \n \/\/ The deepest Fiber on the stack involved in a hydration context.\n \/\/ This may have been an insertion or a hydration.\n@@ -162,6 +170,7 @@ function warnUnhydratedInstance(\n         );\n         break;\n       }\n+      case HostSingleton:\n       case HostComponent: {\n         const isConcurrentMode = (returnFiber.mode & ConcurrentMode) !== NoMode;\n         didNotHydrateInstance(\n@@ -218,6 +227,7 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {\n       case HostRoot: {\n         const parentContainer = returnFiber.stateNode.containerInfo;\n         switch (fiber.tag) {\n+          case HostSingleton:\n           case HostComponent:\n             const type = fiber.type;\n             const props = fiber.pendingProps;\n@@ -242,11 +252,13 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {\n         }\n         break;\n       }\n+      case HostSingleton:\n       case HostComponent: {\n         const parentType = returnFiber.type;\n         const parentProps = returnFiber.memoizedProps;\n         const parentInstance = returnFiber.stateNode;\n         switch (fiber.tag) {\n+          case HostSingleton:\n           case HostComponent: {\n             const type = fiber.type;\n             const props = fiber.pendingProps;\n@@ -293,6 +305,7 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {\n         const parentInstance = suspenseState.dehydrated;\n         if (parentInstance !== null)\n           switch (fiber.tag) {\n+            case HostSingleton:\n             case HostComponent:\n               const type = fiber.type;\n               const props = fiber.pendingProps;\n@@ -329,6 +342,8 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {\n \n function tryHydrate(fiber, nextInstance) {\n   switch (fiber.tag) {\n+    \/\/ HostSingleton is intentionally omitted. the hydration pathway for singletons is non-fallible\n+    \/\/ you can find it inlined in claimHydratableSingleton\n     case HostComponent: {\n       const type = fiber.type;\n       const props = fiber.pendingProps;\n@@ -400,6 +415,25 @@ function throwOnHydrationMismatch(fiber: Fiber) {\n   );\n }\n \n+function claimHydratableSingleton(fiber: Fiber): void {\n+  if (enableHostSingletons && supportsSingletons) {\n+    if (!isHydrating) {\n+      return;\n+    }\n+    const currentRootContainer = getRootHostContainer();\n+    const currentHostContext = getHostContext();\n+    const instance = (fiber.stateNode = resolveSingletonInstance(\n+      fiber.type,\n+      fiber.pendingProps,\n+      currentRootContainer,\n+      currentHostContext,\n+      false,\n+    ));\n+    hydrationParentFiber = fiber;\n+    nextHydratableInstance = getFirstHydratableChild(instance);\n+  }\n+}\n+\n function tryToClaimNextHydratableInstance(fiber: Fiber): void {\n   if (!isHydrating) {\n     return;\n@@ -510,6 +544,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {\n           );\n           break;\n         }\n+        case HostSingleton:\n         case HostComponent: {\n           const parentType = returnFiber.type;\n           const parentProps = returnFiber.memoizedProps;\n@@ -585,7 +620,10 @@ function popToNextHostParent(fiber: Fiber): void {\n     parent !== null &&\n     parent.tag !== HostComponent &&\n     parent.tag !== HostRoot &&\n-    parent.tag !== SuspenseComponent\n+    parent.tag !== SuspenseComponent &&\n+    (!(enableHostSingletons && supportsSingletons)\n+      ? true\n+      : parent.tag !== HostSingleton)\n   ) {\n     parent = parent.return;\n   }\n@@ -610,16 +648,35 @@ function popHydrationState(fiber: Fiber): boolean {\n     return false;\n   }\n \n-  \/\/ If we have any remaining hydratable nodes, we need to delete them now.\n-  \/\/ We only do this deeper than head and body since they tend to have random\n-  \/\/ other nodes in them. We also ignore components with pure text content in\n-  \/\/ side of them. We also don't delete anything inside the root container.\n-  if (\n-    fiber.tag !== HostRoot &&\n-    (fiber.tag !== HostComponent ||\n-      (shouldDeleteUnhydratedTailInstances(fiber.type) &&\n-        !shouldSetTextContent(fiber.type, fiber.memoizedProps)))\n-  ) {\n+  let shouldClear = false;\n+  if (enableHostSingletons && supportsSingletons) {\n+    \/\/ With float we never clear the Root, or Singleton instances. We also do not clear Instances\n+    \/\/ that have singleton text content\n+    if (\n+      fiber.tag !== HostRoot &&\n+      fiber.tag !== HostSingleton &&\n+      !(\n+        fiber.tag === HostComponent &&\n+        shouldSetTextContent(fiber.type, fiber.memoizedProps)\n+      )\n+    ) {\n+      shouldClear = true;\n+    }\n+  } else {\n+    \/\/ If we have any remaining hydratable nodes, we need to delete them now.\n+    \/\/ We only do this deeper than head and body since they tend to have random\n+    \/\/ other nodes in them. We also ignore components with pure text content in\n+    \/\/ side of them. We also don't delete anything inside the root container.\n+    if (\n+      fiber.tag !== HostRoot &&\n+      (fiber.tag !== HostComponent ||\n+        (shouldDeleteUnhydratedTailInstances(fiber.type) &&\n+          !shouldSetTextContent(fiber.type, fiber.memoizedProps)))\n+    ) {\n+      shouldClear = true;\n+    }\n+  }\n+  if (shouldClear) {\n     let nextInstance = nextHydratableInstance;\n     if (nextInstance) {\n       if (shouldClientRenderOnMismatch(fiber)) {\n@@ -695,6 +752,7 @@ export {\n   getIsHydrating,\n   reenterHydrationStateFromDehydratedSuspenseInstance,\n   resetHydrationState,\n+  claimHydratableSingleton,\n   tryToClaimNextHydratableInstance,\n   prepareToHydrateHostInstance,\n   prepareToHydrateHostTextInstance,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.old.js b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.old.js\nindex 3f6ade7832..c4d567da03 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.old.js\n@@ -23,6 +23,7 @@ import type {CapturedValue} from '.\/ReactCapturedValue';\n \n import {\n   HostComponent,\n+  HostSingleton,\n   HostText,\n   HostRoot,\n   SuspenseComponent,\n@@ -34,6 +35,7 @@ import {\n   NoFlags,\n   DidCapture,\n } from '.\/ReactFiberFlags';\n+import {enableHostSingletons} from 'shared\/ReactFeatureFlags';\n \n import {\n   createFiberFromHostInstanceForDeletion,\n@@ -42,6 +44,7 @@ import {\n import {\n   shouldSetTextContent,\n   supportsHydration,\n+  supportsSingletons,\n   canHydrateInstance,\n   canHydrateTextInstance,\n   canHydrateSuspenseInstance,\n@@ -68,6 +71,7 @@ import {\n   didNotFindHydratableInstance,\n   didNotFindHydratableTextInstance,\n   didNotFindHydratableSuspenseInstance,\n+  resolveSingletonInstance,\n } from '.\/ReactFiberHostConfig';\n import {OffscreenLane} from '.\/ReactFiberLane.old';\n import {\n@@ -75,6 +79,10 @@ import {\n   restoreSuspendedTreeContext,\n } from '.\/ReactFiberTreeContext.old';\n import {queueRecoverableErrors} from '.\/ReactFiberWorkLoop.old';\n+import {\n+  getRootHostContainer,\n+  getHostContext,\n+} from '.\/ReactFiberHostContext.old';\n \n \/\/ The deepest Fiber on the stack involved in a hydration context.\n \/\/ This may have been an insertion or a hydration.\n@@ -162,6 +170,7 @@ function warnUnhydratedInstance(\n         );\n         break;\n       }\n+      case HostSingleton:\n       case HostComponent: {\n         const isConcurrentMode = (returnFiber.mode & ConcurrentMode) !== NoMode;\n         didNotHydrateInstance(\n@@ -218,6 +227,7 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {\n       case HostRoot: {\n         const parentContainer = returnFiber.stateNode.containerInfo;\n         switch (fiber.tag) {\n+          case HostSingleton:\n           case HostComponent:\n             const type = fiber.type;\n             const props = fiber.pendingProps;\n@@ -242,11 +252,13 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {\n         }\n         break;\n       }\n+      case HostSingleton:\n       case HostComponent: {\n         const parentType = returnFiber.type;\n         const parentProps = returnFiber.memoizedProps;\n         const parentInstance = returnFiber.stateNode;\n         switch (fiber.tag) {\n+          case HostSingleton:\n           case HostComponent: {\n             const type = fiber.type;\n             const props = fiber.pendingProps;\n@@ -293,6 +305,7 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {\n         const parentInstance = suspenseState.dehydrated;\n         if (parentInstance !== null)\n           switch (fiber.tag) {\n+            case HostSingleton:\n             case HostComponent:\n               const type = fiber.type;\n               const props = fiber.pendingProps;\n@@ -329,6 +342,8 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {\n \n function tryHydrate(fiber, nextInstance) {\n   switch (fiber.tag) {\n+    \/\/ HostSingleton is intentionally omitted. the hydration pathway for singletons is non-fallible\n+    \/\/ you can find it inlined in claimHydratableSingleton\n     case HostComponent: {\n       const type = fiber.type;\n       const props = fiber.pendingProps;\n@@ -400,6 +415,25 @@ function throwOnHydrationMismatch(fiber: Fiber) {\n   );\n }\n \n+function claimHydratableSingleton(fiber: Fiber): void {\n+  if (enableHostSingletons && supportsSingletons) {\n+    if (!isHydrating) {\n+      return;\n+    }\n+    const currentRootContainer = getRootHostContainer();\n+    const currentHostContext = getHostContext();\n+    const instance = (fiber.stateNode = resolveSingletonInstance(\n+      fiber.type,\n+      fiber.pendingProps,\n+      currentRootContainer,\n+      currentHostContext,\n+      false,\n+    ));\n+    hydrationParentFiber = fiber;\n+    nextHydratableInstance = getFirstHydratableChild(instance);\n+  }\n+}\n+\n function tryToClaimNextHydratableInstance(fiber: Fiber): void {\n   if (!isHydrating) {\n     return;\n@@ -510,6 +544,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {\n           );\n           break;\n         }\n+        case HostSingleton:\n         case HostComponent: {\n           const parentType = returnFiber.type;\n           const parentProps = returnFiber.memoizedProps;\n@@ -585,7 +620,10 @@ function popToNextHostParent(fiber: Fiber): void {\n     parent !== null &&\n     parent.tag !== HostComponent &&\n     parent.tag !== HostRoot &&\n-    parent.tag !== SuspenseComponent\n+    parent.tag !== SuspenseComponent &&\n+    (!(enableHostSingletons && supportsSingletons)\n+      ? true\n+      : parent.tag !== HostSingleton)\n   ) {\n     parent = parent.return;\n   }\n@@ -610,16 +648,35 @@ function popHydrationState(fiber: Fiber): boolean {\n     return false;\n   }\n \n-  \/\/ If we have any remaining hydratable nodes, we need to delete them now.\n-  \/\/ We only do this deeper than head and body since they tend to have random\n-  \/\/ other nodes in them. We also ignore components with pure text content in\n-  \/\/ side of them. We also don't delete anything inside the root container.\n-  if (\n-    fiber.tag !== HostRoot &&\n-    (fiber.tag !== HostComponent ||\n-      (shouldDeleteUnhydratedTailInstances(fiber.type) &&\n-        !shouldSetTextContent(fiber.type, fiber.memoizedProps)))\n-  ) {\n+  let shouldClear = false;\n+  if (enableHostSingletons && supportsSingletons) {\n+    \/\/ With float we never clear the Root, or Singleton instances. We also do not clear Instances\n+    \/\/ that have singleton text content\n+    if (\n+      fiber.tag !== HostRoot &&\n+      fiber.tag !== HostSingleton &&\n+      !(\n+        fiber.tag === HostComponent &&\n+        shouldSetTextContent(fiber.type, fiber.memoizedProps)\n+      )\n+    ) {\n+      shouldClear = true;\n+    }\n+  } else {\n+    \/\/ If we have any remaining hydratable nodes, we need to delete them now.\n+    \/\/ We only do this deeper than head and body since they tend to have random\n+    \/\/ other nodes in them. We also ignore components with pure text content in\n+    \/\/ side of them. We also don't delete anything inside the root container.\n+    if (\n+      fiber.tag !== HostRoot &&\n+      (fiber.tag !== HostComponent ||\n+        (shouldDeleteUnhydratedTailInstances(fiber.type) &&\n+          !shouldSetTextContent(fiber.type, fiber.memoizedProps)))\n+    ) {\n+      shouldClear = true;\n+    }\n+  }\n+  if (shouldClear) {\n     let nextInstance = nextHydratableInstance;\n     if (nextInstance) {\n       if (shouldClientRenderOnMismatch(fiber)) {\n@@ -695,6 +752,7 @@ export {\n   getIsHydrating,\n   reenterHydrationStateFromDehydratedSuspenseInstance,\n   resetHydrationState,\n+  claimHydratableSingleton,\n   tryToClaimNextHydratableInstance,\n   prepareToHydrateHostInstance,\n   prepareToHydrateHostTextInstance,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js\nindex 08ded0097b..1da000212b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js\n@@ -32,6 +32,7 @@ import {\n import {get as getInstance} from 'shared\/ReactInstanceMap';\n import {\n   HostComponent,\n+  HostSingleton,\n   ClassComponent,\n   HostRoot,\n   SuspenseComponent,\n@@ -405,6 +406,7 @@ export function getPublicRootInstance(\n     return null;\n   }\n   switch (containerFiber.child.tag) {\n+    case HostSingleton:\n     case HostComponent:\n       return getPublicInstance(containerFiber.child.stateNode);\n     default:\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js\nindex d71bf1c04b..ba046b1d19 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js\n@@ -32,6 +32,7 @@ import {\n import {get as getInstance} from 'shared\/ReactInstanceMap';\n import {\n   HostComponent,\n+  HostSingleton,\n   ClassComponent,\n   HostRoot,\n   SuspenseComponent,\n@@ -405,6 +406,7 @@ export function getPublicRootInstance(\n     return null;\n   }\n   switch (containerFiber.child.tag) {\n+    case HostSingleton:\n     case HostComponent:\n       return getPublicInstance(containerFiber.child.stateNode);\n     default:\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js b\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\nindex da60614dfc..cfaa44da6d 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n@@ -18,13 +18,14 @@ import {\n   ClassComponent,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostRoot,\n   HostPortal,\n   HostText,\n   SuspenseComponent,\n } from '.\/ReactWorkTags';\n import {NoFlags, Placement, Hydrating} from '.\/ReactFiberFlags';\n-import {enableFloat} from 'shared\/ReactFeatureFlags';\n+import {enableFloat, enableHostSingletons} from 'shared\/ReactFeatureFlags';\n \n const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;\n \n@@ -276,10 +277,12 @@ export function findCurrentHostFiber(parent: Fiber): Fiber | null {\n \n function findCurrentHostFiberImpl(node: Fiber) {\n   \/\/ Next we'll drill down this component to find the first HostComponent\/Text.\n+  const tag = node.tag;\n   if (\n-    node.tag === HostComponent ||\n-    node.tag === HostText ||\n-    (enableFloat ? node.tag === HostResource : false)\n+    tag === HostComponent ||\n+    (enableFloat ? tag === HostResource : false) ||\n+    (enableHostSingletons ? tag === HostSingleton : false) ||\n+    tag === HostText\n   ) {\n     return node;\n   }\n@@ -305,10 +308,12 @@ export function findCurrentHostFiberWithNoPortals(parent: Fiber): Fiber | null {\n \n function findCurrentHostFiberWithNoPortalsImpl(node: Fiber) {\n   \/\/ Next we'll drill down this component to find the first HostComponent\/Text.\n+  const tag = node.tag;\n   if (\n-    node.tag === HostComponent ||\n-    node.tag === HostText ||\n-    (enableFloat ? node.tag === HostResource : false)\n+    tag === HostComponent ||\n+    (enableFloat ? tag === HostResource : false) ||\n+    (enableHostSingletons ? tag === HostSingleton : false) ||\n+    tag === HostText\n   ) {\n     return node;\n   }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js\nindex 66794fbccd..cb59bd936b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js\n@@ -20,6 +20,7 @@ import {\n   HostRoot,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostPortal,\n   ContextProvider,\n   SuspenseComponent,\n@@ -117,6 +118,7 @@ function unwindWork(\n       return null;\n     }\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent: {\n       \/\/ TODO: popHydrationState\n       popHostContext(workInProgress);\n@@ -236,6 +238,7 @@ function unwindInterruptedWork(\n       break;\n     }\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent: {\n       popHostContext(interruptedWork);\n       break;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js\nindex e30fa19532..7328940276 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js\n@@ -20,6 +20,7 @@ import {\n   HostRoot,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostPortal,\n   ContextProvider,\n   SuspenseComponent,\n@@ -117,6 +118,7 @@ function unwindWork(\n       return null;\n     }\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent: {\n       \/\/ TODO: popHydrationState\n       popHostContext(workInProgress);\n@@ -236,6 +238,7 @@ function unwindInterruptedWork(\n       break;\n     }\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent: {\n       popHostContext(interruptedWork);\n       break;\ndiff --git a\/packages\/react-reconciler\/src\/ReactTestSelectors.js b\/packages\/react-reconciler\/src\/ReactTestSelectors.js\nindex bda36f6d2a..1869fb2657 100644\n--- a\/packages\/react-reconciler\/src\/ReactTestSelectors.js\n+++ b\/packages\/react-reconciler\/src\/ReactTestSelectors.js\n@@ -13,6 +13,7 @@ import type {Instance} from '.\/ReactFiberHostConfig';\n import {\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n } from 'react-reconciler\/src\/ReactWorkTags';\n import getComponentNameFromType from 'shared\/getComponentNameFromType';\n@@ -142,6 +143,7 @@ function findFiberRootForHostRoot(hostRoot: Instance): Fiber {\n }\n \n function matchSelector(fiber: Fiber, selector: Selector): boolean {\n+  const tag = fiber.tag;\n   switch (selector.$$typeof) {\n     case COMPONENT_TYPE:\n       if (fiber.type === selector.value) {\n@@ -154,7 +156,11 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {\n         ((selector: any): HasPseudoClassSelector).value,\n       );\n     case ROLE_TYPE:\n-      if (fiber.tag === HostComponent || fiber.tag === HostResource) {\n+      if (\n+        tag === HostComponent ||\n+        tag === HostResource ||\n+        tag === HostSingleton\n+      ) {\n         const node = fiber.stateNode;\n         if (\n           matchAccessibilityRole(node, ((selector: any): RoleSelector).value)\n@@ -165,9 +171,10 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {\n       break;\n     case TEXT_TYPE:\n       if (\n-        fiber.tag === HostComponent ||\n-        fiber.tag === HostText ||\n-        fiber.tag === HostResource\n+        tag === HostComponent ||\n+        tag === HostText ||\n+        tag === HostResource ||\n+        tag === HostSingleton\n       ) {\n         const textContent = getTextContent(fiber);\n         if (\n@@ -179,7 +186,11 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {\n       }\n       break;\n     case TEST_NAME_TYPE:\n-      if (fiber.tag === HostComponent || fiber.tag === HostResource) {\n+      if (\n+        tag === HostComponent ||\n+        tag === HostResource ||\n+        tag === HostSingleton\n+      ) {\n         const dataTestID = fiber.memoizedProps['data-testname'];\n         if (\n           typeof dataTestID === 'string' &&\n@@ -222,11 +233,14 @@ function findPaths(root: Fiber, selectors: Array<Selector>): Array<Fiber> {\n   let index = 0;\n   while (index < stack.length) {\n     const fiber = ((stack[index++]: any): Fiber);\n+    const tag = fiber.tag;\n     let selectorIndex = ((stack[index++]: any): number);\n     let selector = selectors[selectorIndex];\n \n     if (\n-      (fiber.tag === HostComponent || fiber.tag === HostResource) &&\n+      (tag === HostComponent ||\n+        tag === HostResource ||\n+        tag === HostSingleton) &&\n       isHiddenSubtree(fiber)\n     ) {\n       continue;\n@@ -257,11 +271,14 @@ function hasMatchingPaths(root: Fiber, selectors: Array<Selector>): boolean {\n   let index = 0;\n   while (index < stack.length) {\n     const fiber = ((stack[index++]: any): Fiber);\n+    const tag = fiber.tag;\n     let selectorIndex = ((stack[index++]: any): number);\n     let selector = selectors[selectorIndex];\n \n     if (\n-      (fiber.tag === HostComponent || fiber.tag === HostResource) &&\n+      (tag === HostComponent ||\n+        tag === HostResource ||\n+        tag === HostSingleton) &&\n       isHiddenSubtree(fiber)\n     ) {\n       continue;\n@@ -303,7 +320,12 @@ export function findAllNodes(\n   let index = 0;\n   while (index < stack.length) {\n     const node = ((stack[index++]: any): Fiber);\n-    if (node.tag === HostComponent || node.tag === HostResource) {\n+    const tag = node.tag;\n+    if (\n+      tag === HostComponent ||\n+      tag === HostResource ||\n+      tag === HostSingleton\n+    ) {\n       if (isHiddenSubtree(node)) {\n         continue;\n       }\n@@ -338,11 +360,14 @@ export function getFindAllNodesFailureDescription(\n   let index = 0;\n   while (index < stack.length) {\n     const fiber = ((stack[index++]: any): Fiber);\n+    const tag = fiber.tag;\n     let selectorIndex = ((stack[index++]: any): number);\n     const selector = selectors[selectorIndex];\n \n     if (\n-      (fiber.tag === HostComponent || fiber.tag === HostResource) &&\n+      (tag === HostComponent ||\n+        tag === HostResource ||\n+        tag === HostSingleton) &&\n       isHiddenSubtree(fiber)\n     ) {\n       continue;\n@@ -493,10 +518,15 @@ export function focusWithin(\n   let index = 0;\n   while (index < stack.length) {\n     const fiber = ((stack[index++]: any): Fiber);\n+    const tag = fiber.tag;\n     if (isHiddenSubtree(fiber)) {\n       continue;\n     }\n-    if (fiber.tag === HostComponent || fiber.tag === HostResource) {\n+    if (\n+      tag === HostComponent ||\n+      tag === HostResource ||\n+      tag === HostSingleton\n+    ) {\n       const node = fiber.stateNode;\n       if (setFocusIfFocusable(node)) {\n         return true;\ndiff --git a\/packages\/react-reconciler\/src\/ReactWorkTags.js b\/packages\/react-reconciler\/src\/ReactWorkTags.js\nindex 0a62312ce8..827ac1b782 100644\n--- a\/packages\/react-reconciler\/src\/ReactWorkTags.js\n+++ b\/packages\/react-reconciler\/src\/ReactWorkTags.js\n@@ -34,7 +34,8 @@ export type WorkTag =\n   | 23\n   | 24\n   | 25\n-  | 26;\n+  | 26\n+  | 27;\n \n export const FunctionComponent = 0;\n export const ClassComponent = 1;\n@@ -62,3 +63,4 @@ export const LegacyHiddenComponent = 23;\n export const CacheComponent = 24;\n export const TracingMarkerComponent = 25;\n export const HostResource = 26;\n+export const HostSingleton = 27;\ndiff --git a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\nindex 4bb920ca8b..9c1499acef 100644\n--- a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n+++ b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n@@ -199,3 +199,14 @@ export const isHostResourceType = $$$hostConfig.isHostResourceType;\n export const getResource = $$$hostConfig.getResource;\n export const acquireResource = $$$hostConfig.acquireResource;\n export const releaseResource = $$$hostConfig.releaseResource;\n+\n+\/\/ -------------------\n+\/\/     Singletons\n+\/\/     (optional)\n+\/\/ -------------------\n+export const supportsSingletons = $$$hostConfig.supportsSingletons;\n+export const resolveSingletonInstance = $$$hostConfig.resolveSingletonInstance;\n+export const clearSingleton = $$$hostConfig.clearSingleton;\n+export const acquireSingletonInstance = $$$hostConfig.acquireSingletonInstance;\n+export const releaseSingletonInstance = $$$hostConfig.releaseSingletonInstance;\n+export const isHostSingletonType = $$$hostConfig.isHostSingletonType;\ndiff --git a\/packages\/react-reconciler\/src\/getComponentNameFromFiber.js b\/packages\/react-reconciler\/src\/getComponentNameFromFiber.js\nindex 4b14f01014..190fce588f 100644\n--- a\/packages\/react-reconciler\/src\/getComponentNameFromFiber.js\n+++ b\/packages\/react-reconciler\/src\/getComponentNameFromFiber.js\n@@ -20,6 +20,7 @@ import {\n   HostPortal,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostText,\n   Fragment,\n   Mode,\n@@ -79,6 +80,7 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {\n     case Fragment:\n       return 'Fragment';\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent:\n       \/\/ Host component type is the display name (e.g. \"div\", \"View\")\n       return type;\ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\nindex e8daa8368f..c524bb181a 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n@@ -47,6 +47,7 @@ export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoHydration';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoTestSelectors';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoMicrotasks';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoResources';\n+export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoSingletons';\n \n const NO_CONTEXT = {};\n const UPDATE_SIGNAL = {};\ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\nindex 1bcd724eb7..57996d680d 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n@@ -32,6 +32,7 @@ import {\n   ClassComponent,\n   HostComponent,\n   HostResource,\n+  HostSingleton,\n   HostPortal,\n   HostText,\n   HostRoot,\n@@ -202,6 +203,7 @@ function toTree(node: ?Fiber) {\n         rendered: childrenToTree(node.child),\n       };\n     case HostResource:\n+    case HostSingleton:\n     case HostComponent: {\n       return {\n         nodeType: 'host',\n@@ -308,7 +310,12 @@ class ReactTestInstance {\n   }\n \n   get instance(): $FlowFixMe {\n-    if (this._fiber.tag === HostComponent || this._fiber.tag === HostResource) {\n+    const tag = this._fiber.tag;\n+    if (\n+      tag === HostComponent ||\n+      tag === HostResource ||\n+      tag === HostSingleton\n+    ) {\n       return getPublicInstance(this._fiber.stateNode);\n     } else {\n       return this._fiber.stateNode;\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 67a9ac2014..f43beacb79 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -100,6 +100,10 @@ export const enableSuspenseAvoidThisFallbackFizz = false;\n \n export const enableCPUSuspense = __EXPERIMENTAL__;\n \n+export const enableHostSingletons = __EXPERIMENTAL__;\n+\n+export const enableFloat = __EXPERIMENTAL__;\n+\n \/\/ When a node is unmounted, recurse into the Fiber subtree and clean out\n \/\/ references. Each level cleans up more fiber fields than the previous level.\n \/\/ As far as we know, React itself doesn't leak, but because the Fiber contains\n@@ -113,7 +117,6 @@ export const enableCPUSuspense = __EXPERIMENTAL__;\n \/\/ aggressiveness.\n export const deletedTreeCleanUpLevel = 3;\n \n-export const enableFloat = __EXPERIMENTAL__;\n export const enableUseHook = __EXPERIMENTAL__;\n \n \/\/ Enables unstable_useMemoCache hook, intended as a compilation target for\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex beafb67bf0..e81b1d3d37 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -84,6 +84,7 @@ export const enableUseMutableSource = true;\n export const enableTransitionTracing = false;\n \n export const enableFloat = false;\n+export const enableHostSingletons = false;\n \n export const useModernStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex 3fdedac111..7dc0ac1e2f 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -73,6 +73,7 @@ export const enableUseMutableSource = false;\n export const enableTransitionTracing = false;\n \n export const enableFloat = false;\n+export const enableHostSingletons = false;\n \n export const useModernStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex ce7afbcef7..2d408c9c10 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -73,6 +73,7 @@ export const enableUseMutableSource = false;\n export const enableTransitionTracing = false;\n \n export const enableFloat = false;\n+export const enableHostSingletons = false;\n \n export const useModernStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\nindex 7d9054bfeb..69d0c027ae 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n@@ -71,6 +71,7 @@ export const enableUseMutableSource = false;\n export const enableTransitionTracing = false;\n \n export const enableFloat = false;\n+export const enableHostSingletons = false;\n \n export const useModernStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex 38278fbc93..9ff5908cc4 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -75,6 +75,7 @@ export const enableUseMutableSource = true;\n export const enableTransitionTracing = false;\n \n export const enableFloat = false;\n+export const enableHostSingletons = false;\n \n export const useModernStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.testing.js b\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\nindex 308aaed94d..f2346a66aa 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n@@ -73,6 +73,7 @@ export const enableUseMutableSource = false;\n export const enableTransitionTracing = false;\n \n export const enableFloat = false;\n+export const enableHostSingletons = false;\n \n export const useModernStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\nindex 89b24c8ed6..7114d9d212 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n@@ -74,6 +74,7 @@ export const enableUseMutableSource = true;\n export const enableTransitionTracing = false;\n \n export const enableFloat = false;\n+export const enableHostSingletons = false;\n \n export const useModernStrictMode = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\nindex 67812e36da..28f5aa531d 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n@@ -59,6 +59,5 @@ export const disableNativeComponentFrames = false;\n export const createRootStrictEffectsByDefault = false;\n export const enableStrictEffects = false;\n export const allowConcurrentByDefault = true;\n-export const enableFloat = false;\n \/\/ You probably *don't* want to add more hardcoded ones.\n \/\/ Instead, try to add them above with the __VARIANT__ value.\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 1811c9bf7c..755d44053c 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -56,6 +56,7 @@ export const enableFloat = false;\n export const enableUseHook = true;\n export const enableUseMemoCacheHook = true;\n export const enableUseEventHook = true;\n+export const enableHostSingletons = false;\n \n \/\/ Logs additional User Timing API marks for use with an experimental profiling tool.\n export const enableSchedulingProfiler: boolean =\ndiff --git a\/scripts\/error-codes\/codes.json b\/scripts\/error-codes\/codes.json\nindex 9995cc0456..db795a516f 100644\n--- a\/scripts\/error-codes\/codes.json\n+++ b\/scripts\/error-codes\/codes.json\n@@ -434,5 +434,10 @@\n   \"446\": \"\\\"resourceRoot\\\" was expected to exist. This is a bug in React.\",\n   \"447\": \"While attempting to insert a Resource, React expected the Document to contain a head element but it was not found.\",\n   \"448\": \"createPortal was called on the server. Portals are not currently supported on the server. Update your program to conditionally call createPortal on the client only.\",\n-  \"449\": \"flushSync was called on the server. This is likely caused by a function being called during render or in module scope that was intended to be called from an effect or event handler. Update your to not call flushSync no the server.\"\n+  \"449\": \"flushSync was called on the server. This is likely caused by a function being called during render or in module scope that was intended to be called from an effect or event handler. Update your to not call flushSync no the server.\",\n+  \"450\": \"The current renderer does not support Singletons. This error is likely caused by a bug in React. Please file an issue.\",\n+  \"451\": \"resolveSingletonInstance was called with an element type that is not supported. This is a bug in React.\",\n+  \"452\": \"React expected an <html> element (document.documentElement) to exist in the Document but one was not found. React never removes the documentElement for any Document it renders into so the cause is likely in some other script running on this page.\",\n+  \"453\": \"React expected a <head> element (document.head) to exist in the Document but one was not found. React never removes the head for any Document it renders into so the cause is likely in some other script running on this page.\",\n+  \"454\": \"React expected a <body> element (document.body) to exist in the Document but one was not found. React never removes the body for any Document it renders into so the cause is likely in some other script running on this page.\"\n }\n","parents":["aa9988e5e669122ed0d76c72f2dea159eef872b4"]}</article></body></html>

dillon1000/react

Files changed