From 70a8db8b1413bcad77e9a064b0f741035feaec14 Mon Sep 17 00:00:00 2001
From: Luna Ruan <luna@fb.com>
Date: Fri, 8 Nov 2019 14:50:15 -0800
Subject: [PATCH 1/7] Add useOpaqueIdentifier Hook

We currently use unique IDs in a lot of places. Examples are:
  * `<label for="ID">`
  * `aria-labelledby`

This can cause some issues:
  1. If we server side render and then hydrate, this could cause an
     hydration ID mismatch
  2. If we server side render one part of the page and client side
     render another part of the page, the ID for one part could be
     different than the ID for another part even though they are
     supposed to be the same
  3. If we conditionally render something with an ID ,  this might also
     cause an ID mismatch because the ID will be different on other
     parts of the page

This PR creates a new hook `useUniqueId` that generates a different
unique ID based on whether the hook was called on the server or client.
If the hook is called during hydration, it generates an opaque object
that will rerender the hook so that the IDs match.
---
 packages/react-art/src/ReactARTHostConfig.js  |  20 +
 .../react-debug-tools/src/ReactDebugHooks.js  |  26 +
 .../ReactHooksInspectionIntegration-test.js   |  60 ++
 ...DOMServerIntegrationHooks-test.internal.js | 910 ++++++++++++++++++
 .../src/client/DOMPropertyOperations.js       |   8 +
 .../react-dom/src/client/ReactDOMComponent.js |  10 +
 .../src/client/ReactDOMHostConfig.js          | 120 +++
 .../src/server/ReactPartialRendererHooks.js   |   8 +
 .../src/ReactFabricHostConfig.js              |  24 +
 .../src/ReactNativeHostConfig.js              |  24 +
 .../src/createReactNoop.js                    |   4 +
 .../react-reconciler/src/ReactCurrentFiber.js |   6 +
 .../react-reconciler/src/ReactFiberHooks.js   | 100 +-
 .../src/ReactFiberHydrationContext.js         |   5 +
 .../src/ReactFiberWorkLoop.js                 |   4 +-
 .../src/forks/ReactFiberHostConfig.custom.js  |   8 +
 .../src/ReactTestHostConfig.js                |  68 ++
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   7 +
 packages/shared/ReactSymbols.js               |   4 +
 scripts/error-codes/codes.json                |   3 +-
 25 files changed, 1417 insertions(+), 8 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 1b010e09966d..68ade06d528e 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -470,6 +470,26 @@ export function beforeRemoveInstance(instance) {
   // noop
 }
 
+export function isOpaqueHydratingObject(value: mixed): boolean {
+  throw new Error('Not yet implemented');
+}
+
+export function makeOpaqueHydratingObject(setId): OpaqueIDType {
+  throw new Error('Not yet implemented.');
+}
+
+export function getIsUpdatingOpaqueValueInRenderPhase(setId) {
+  // noop
+}
+
+export function makeClientId(): OpaqueIDType {
+  throw new Error('Not yet implemented');
+}
+
+export function makeServerId(): OpaqueIDType {
+  throw new Error('Not yet implemented');
+}
+
 export function registerEvent(event: any, rootContainerInstance: any) {
   throw new Error('Not yet implemented.');
 }
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 1fab259eb127..c175eb500b6c 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -18,12 +18,16 @@ import type {
   ReactScopeMethods,
 } from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
+import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
+
 import type {Hook, TimeoutConfig} from 'react-reconciler/src/ReactFiberHooks';
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
 import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig';
+import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {REACT_OPAQUE_OBJECT_TYPE} from 'shared/ReactSymbols';
 import {
   FunctionComponent,
   SimpleMemoComponent,
@@ -61,6 +65,8 @@ type Dispatch<A> = A => void;
 
 let primitiveStackCache: null | Map<string, Array<any>> = null;
 
+let currentFiber: Fiber | null = null;
+
 function getPrimitiveStackCache(): Map<string, Array<any>> {
   // This initializes a cache of all primitive hooks so that the top
   // most stack frames added by calling the primitive hook can be removed.
@@ -319,6 +325,23 @@ function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
   return value;
 }
 
+function useOpaqueIdentifier(): OpaqueIDType | void {
+  const hook = nextHook(); // State
+  if (currentFiber && currentFiber.mode === NoMode) {
+    nextHook(); // Effect
+  }
+  let value = hook === null ? undefined : hook.memoizedState;
+  if (value && value.$$typeof === REACT_OPAQUE_OBJECT_TYPE) {
+    value = undefined;
+  }
+  hookLog.push({
+    primitive: 'OpaqueIdentifier',
+    stackError: new Error(),
+    value,
+  });
+  return value;
+}
+
 const Dispatcher: DispatcherType = {
   readContext,
   useCallback,
@@ -336,6 +359,7 @@ const Dispatcher: DispatcherType = {
   useMutableSource,
   useDeferredValue,
   useEvent,
+  useOpaqueIdentifier,
 };
 
 // Inspect
@@ -684,6 +708,8 @@ export function inspectHooksOfFiber(
     currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
   }
 
+  currentFiber = fiber;
+
   if (
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index ef41b65426f3..a1c81eaa7cec 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -422,6 +422,66 @@ describe('ReactHooksInspectionIntegration', () => {
         },
       ]);
     });
+
+    it('should support composite useOpaqueIdentifier hook', () => {
+      function Foo(props) {
+        const id = React.useOpaqueIdentifier();
+        const [state] = React.useState(() => 'hello', []);
+        return <div id={id}>{state}</div>;
+      }
+
+      const renderer = ReactTestRenderer.create(<Foo />);
+      const childFiber = renderer.root.findByType(Foo)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+      expect(tree.length).toEqual(2);
+
+      expect(tree[0].id).toEqual(0);
+      expect(tree[0].isStateEditable).toEqual(false);
+      expect(tree[0].name).toEqual('OpaqueIdentifier');
+      expect(typeof tree[0].value).toBe('string');
+      expect(tree[0].value.startsWith('c_')).toBe(true);
+
+      expect(tree[1]).toEqual({
+        id: 1,
+        isStateEditable: true,
+        name: 'State',
+        value: 'hello',
+        subHooks: [],
+      });
+    });
+
+    it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
+      function Foo(props) {
+        const id = React.useOpaqueIdentifier();
+        const [state] = React.useState(() => 'hello', []);
+        return <div id={id}>{state}</div>;
+      }
+
+      const renderer = ReactTestRenderer.create(<Foo />, {
+        unstable_isConcurrent: true,
+      });
+      expect(Scheduler).toFlushWithoutYielding();
+
+      const childFiber = renderer.root.findByType(Foo)._currentFiber();
+      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+      expect(tree.length).toEqual(2);
+
+      expect(tree[0].id).toEqual(0);
+      expect(tree[0].isStateEditable).toEqual(false);
+      expect(tree[0].name).toEqual('OpaqueIdentifier');
+      expect(typeof tree[0].value).toBe('string');
+      expect(tree[0].value.startsWith('c_')).toBe(true);
+
+      expect(tree[1]).toEqual({
+        id: 1,
+        isStateEditable: true,
+        name: 'State',
+        value: 'hello',
+        subHooks: [],
+      });
+    });
   }
 
   describe('useDebugValue', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
index 012e420f80ec..496c41f57b62 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
@@ -18,6 +18,7 @@ let ReactFeatureFlags;
 let ReactDOM;
 let ReactDOMServer;
 let ReactTestUtils;
+let Scheduler;
 let useState;
 let useReducer;
 let useEffect;
@@ -28,6 +29,7 @@ let useRef;
 let useImperativeHandle;
 let useLayoutEffect;
 let useDebugValue;
+let useOpaqueIdentifier;
 let forwardRef;
 let yieldedValues;
 let yieldValue;
@@ -39,10 +41,12 @@ function initModules() {
 
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
   ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+  ReactFeatureFlags.flushSuspenseFallbacksInTests = false;
   React = require('react');
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
+  Scheduler = require('scheduler');
   useState = React.useState;
   useReducer = React.useReducer;
   useEffect = React.useEffect;
@@ -53,6 +57,7 @@ function initModules() {
   useDebugValue = React.useDebugValue;
   useImperativeHandle = React.useImperativeHandle;
   useLayoutEffect = React.useLayoutEffect;
+  useOpaqueIdentifier = React.useOpaqueIdentifier;
   forwardRef = React.forwardRef;
 
   yieldedValues = [];
@@ -78,6 +83,9 @@ const {
   itRenders,
   itThrowsWhenRendering,
   serverRender,
+  streamRender,
+  clientCleanRender,
+  clientRenderOnServerString,
 } = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerHooks', () => {
@@ -834,4 +842,906 @@ describe('ReactDOMServerHooks', () => {
       expect(domNode2.textContent).toEqual('42');
     });
   });
+
+  if (__EXPERIMENTAL__) {
+    describe('useOpaqueIdentifier', () => {
+      it('generates unique ids for server string render', async () => {
+        function App(props) {
+          const idOne = useOpaqueIdentifier();
+          const idTwo = useOpaqueIdentifier();
+          return (
+            <div>
+              <div aria-labelledby={idOne} />
+              <div id={idOne} />
+              <span aria-labelledby={idTwo} />
+              <span id={idTwo} />
+            </div>
+          );
+        }
+
+        const domNode = await serverRender(<App />);
+        expect(domNode.children.length).toEqual(4);
+        expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
+          domNode.children[1].getAttribute('id'),
+        );
+        expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
+          domNode.children[3].getAttribute('id'),
+        );
+        expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
+          domNode.children[2].getAttribute('aria-labelledby'),
+        );
+        expect(
+          domNode.children[0].getAttribute('aria-labelledby'),
+        ).not.toBeNull();
+        expect(
+          domNode.children[2].getAttribute('aria-labelledby'),
+        ).not.toBeNull();
+      });
+
+      it('generates unique ids for server stream render', async () => {
+        function App(props) {
+          const idOne = useOpaqueIdentifier();
+          const idTwo = useOpaqueIdentifier();
+          return (
+            <div>
+              <div aria-labelledby={idOne} />
+              <div id={idOne} />
+              <span aria-labelledby={idTwo} />
+              <span id={idTwo} />
+            </div>
+          );
+        }
+
+        const domNode = await streamRender(<App />);
+        expect(domNode.children.length).toEqual(4);
+        expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
+          domNode.children[1].getAttribute('id'),
+        );
+        expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
+          domNode.children[3].getAttribute('id'),
+        );
+        expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
+          domNode.children[2].getAttribute('aria-labelledby'),
+        );
+        expect(
+          domNode.children[0].getAttribute('aria-labelledby'),
+        ).not.toBeNull();
+        expect(
+          domNode.children[2].getAttribute('aria-labelledby'),
+        ).not.toBeNull();
+      });
+
+      it('generates unique ids for client render', async () => {
+        function App(props) {
+          const idOne = useOpaqueIdentifier();
+          const idTwo = useOpaqueIdentifier();
+          return (
+            <div>
+              <div aria-labelledby={idOne} />
+              <div id={idOne} />
+              <span aria-labelledby={idTwo} />
+              <span id={idTwo} />
+            </div>
+          );
+        }
+
+        const domNode = await clientCleanRender(<App />);
+        expect(domNode.children.length).toEqual(4);
+        expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
+          domNode.children[1].getAttribute('id'),
+        );
+        expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
+          domNode.children[3].getAttribute('id'),
+        );
+        expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
+          domNode.children[2].getAttribute('aria-labelledby'),
+        );
+        expect(
+          domNode.children[0].getAttribute('aria-labelledby'),
+        ).not.toBeNull();
+        expect(
+          domNode.children[2].getAttribute('aria-labelledby'),
+        ).not.toBeNull();
+      });
+
+      it('generates unique ids for client render on good server markup', async () => {
+        function App(props) {
+          const idOne = useOpaqueIdentifier();
+          const idTwo = useOpaqueIdentifier();
+          return (
+            <div>
+              <div aria-labelledby={idOne} />
+              <div id={idOne} />
+              <span aria-labelledby={idTwo} />
+              <span id={idTwo} />
+            </div>
+          );
+        }
+
+        const domNode = await clientRenderOnServerString(<App />);
+        expect(domNode.children.length).toEqual(4);
+        expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
+          domNode.children[1].getAttribute('id'),
+        );
+        expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
+          domNode.children[3].getAttribute('id'),
+        );
+        expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
+          domNode.children[2].getAttribute('aria-labelledby'),
+        );
+        expect(
+          domNode.children[0].getAttribute('aria-labelledby'),
+        ).not.toBeNull();
+        expect(
+          domNode.children[2].getAttribute('aria-labelledby'),
+        ).not.toBeNull();
+      });
+
+      it('useOpaqueIdentifier does not change id even if the component updates during client render', async () => {
+        let _setShowId;
+        function App() {
+          const id = useOpaqueIdentifier();
+          const [showId, setShowId] = useState(false);
+          _setShowId = setShowId;
+          return (
+            <div>
+              <div aria-labelledby={id} />
+              {showId && <div id={id} />}
+            </div>
+          );
+        }
+
+        const domNode = await clientCleanRender(<App />);
+        const oldClientId = domNode.children[0].getAttribute('aria-labelledby');
+
+        expect(domNode.children.length).toEqual(1);
+        expect(oldClientId).not.toBeNull();
+
+        await ReactTestUtils.act(async () => _setShowId(true));
+
+        expect(domNode.children.length).toEqual(2);
+        expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
+          domNode.children[1].getAttribute('id'),
+        );
+        expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
+          oldClientId,
+        );
+      });
+
+      it('useOpaqueIdentifier: IDs match when, after hydration, a new component that uses the ID is rendered', async () => {
+        let _setShowDiv;
+        function App() {
+          const id = useOpaqueIdentifier();
+          const [showDiv, setShowDiv] = useState(false);
+          _setShowDiv = setShowDiv;
+
+          return (
+            <div>
+              <div id={id}>Child One</div>
+              {showDiv && <div id={id}>Child Two</div>}
+            </div>
+          );
+        }
+
+        const container = document.createElement('div');
+        document.body.append(container);
+
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+        const root = ReactDOM.createRoot(container, {hydrate: true});
+        root.render(<App />);
+        Scheduler.unstable_flushAll();
+        jest.runAllTimers();
+
+        expect(container.children[0].children.length).toEqual(1);
+        const oldServerId = container.children[0].children[0].getAttribute(
+          'id',
+        );
+        expect(oldServerId).not.toBeNull();
+
+        await ReactTestUtils.act(async () => {
+          _setShowDiv(true);
+        });
+        expect(container.children[0].children.length).toEqual(2);
+        expect(container.children[0].children[0].getAttribute('id')).toEqual(
+          container.children[0].children[1].getAttribute('id'),
+        );
+        expect(
+          container.children[0].children[0].getAttribute('id'),
+        ).not.toEqual(oldServerId);
+        expect(
+          container.children[0].children[0].getAttribute('id'),
+        ).not.toBeNull();
+      });
+
+      it('useOpaqueIdentifier: IDs match when, after hydration, a new component that uses the ID is rendered for legacy', async () => {
+        let _setShowDiv;
+        function App() {
+          const id = useOpaqueIdentifier();
+          const [showDiv, setShowDiv] = useState(false);
+          _setShowDiv = setShowDiv;
+
+          return (
+            <div>
+              <div id={id}>Child One</div>
+              {showDiv && <div id={id}>Child Two</div>}
+            </div>
+          );
+        }
+
+        const container = document.createElement('div');
+        document.body.append(container);
+
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+        ReactDOM.hydrate(<App />, container);
+
+        expect(container.children[0].children.length).toEqual(1);
+        const oldServerId = container.children[0].children[0].getAttribute(
+          'id',
+        );
+        expect(oldServerId).not.toBeNull();
+
+        await ReactTestUtils.act(async () => {
+          _setShowDiv(true);
+        });
+        expect(container.children[0].children.length).toEqual(2);
+        expect(container.children[0].children[0].getAttribute('id')).toEqual(
+          container.children[0].children[1].getAttribute('id'),
+        );
+        expect(
+          container.children[0].children[0].getAttribute('id'),
+        ).not.toEqual(oldServerId);
+        expect(
+          container.children[0].children[0].getAttribute('id'),
+        ).not.toBeNull();
+      });
+
+      it('useOpaqueIdentifier: ID is not used during hydration but is used in an update', async () => {
+        let _setShow;
+        function App() {
+          Scheduler.unstable_yieldValue('App');
+          const id = useOpaqueIdentifier();
+          const [show, setShow] = useState(false);
+          _setShow = setShow;
+          return (
+            <div>
+              <span id={show ? id : null}>{'Child One'}</span>
+            </div>
+          );
+        }
+
+        const container = document.createElement('div');
+        document.body.append(container);
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+        const root = ReactDOM.createRoot(container, {hydrate: true});
+        ReactTestUtils.act(() => {
+          root.render(<App />);
+        });
+        expect(Scheduler).toHaveYielded(['App', 'App']);
+        // The ID goes from not being used to being added to the page
+        ReactTestUtils.act(() => {
+          _setShow(true);
+        });
+        expect(Scheduler).toHaveYielded(['App', 'App']);
+        expect(
+          container.getElementsByTagName('span')[0].getAttribute('id'),
+        ).not.toBeNull();
+      });
+
+      it('useOpaqueIdentifier: ID is not used during hydration but is used in an update in legacy', async () => {
+        let _setShow;
+        function App() {
+          Scheduler.unstable_yieldValue('App');
+          const id = useOpaqueIdentifier();
+          const [show, setShow] = useState(false);
+          _setShow = setShow;
+          return (
+            <div>
+              <span id={show ? id : null}>{'Child One'}</span>
+            </div>
+          );
+        }
+
+        const container = document.createElement('div');
+        document.body.append(container);
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+        ReactDOM.hydrate(<App />, container);
+        expect(Scheduler).toHaveYielded(['App', 'App']);
+        // The ID goes from not being used to being added to the page
+        ReactTestUtils.act(() => {
+          _setShow(true);
+        });
+        expect(Scheduler).toHaveYielded(['App']);
+        expect(
+          container.getElementsByTagName('span')[0].getAttribute('id'),
+        ).not.toBeNull();
+      });
+
+      it('useOpaqueIdentifierr: flushSync', async () => {
+        let _setShow;
+        function App() {
+          const id = useOpaqueIdentifier();
+          const [show, setShow] = useState(false);
+          _setShow = setShow;
+          return (
+            <div>
+              <span id={show ? id : null}>{'Child One'}</span>
+            </div>
+          );
+        }
+
+        const container = document.createElement('div');
+        document.body.append(container);
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+        const root = ReactDOM.createRoot(container, {hydrate: true});
+        ReactTestUtils.act(() => {
+          root.render(<App />);
+        });
+
+        // The ID goes from not being used to being added to the page
+        ReactTestUtils.act(() => {
+          ReactDOM.flushSync(() => {
+            _setShow(true);
+          });
+        });
+        expect(
+          container.getElementsByTagName('span')[0].getAttribute('id'),
+        ).not.toBeNull();
+      });
+
+      it('useOpaqueIdentifier: children with id hydrates before other children if ID updates', async () => {
+        let _setShow;
+
+        const child1Ref = React.createRef();
+        const childWithIDRef = React.createRef();
+        const setShowRef = React.createRef();
+
+        // RENAME THESE
+        function Child1() {
+          Scheduler.unstable_yieldValue('Child One');
+          return <span ref={child1Ref}>{'Child One'}</span>;
+        }
+
+        function Child2() {
+          Scheduler.unstable_yieldValue('Child Two');
+          return <span>{'Child Two'}</span>;
+        }
+
+        const Children = React.memo(function Children() {
+          return (
+            <React.Suspense fallback="Loading 1...">
+              <Child1 />
+              <Child2 />
+            </React.Suspense>
+          );
+        });
+
+        function ChildWithID({parentID}) {
+          Scheduler.unstable_yieldValue('Child with ID');
+          return (
+            <span id={parentID} ref={childWithIDRef}>
+              {'Child with ID'}
+            </span>
+          );
+        }
+
+        const ChildrenWithID = React.memo(function ChildrenWithID({parentID}) {
+          return (
+            <React.Suspense fallback="Loading 2...">
+              <ChildWithID parentID={parentID} />
+            </React.Suspense>
+          );
+        });
+
+        function App() {
+          const id = useOpaqueIdentifier();
+          const [show, setShow] = useState(false);
+          _setShow = setShow;
+          return (
+            <div>
+              <Children />
+              <ChildrenWithID parentID={id} />
+              {show && (
+                <span aria-labelledby={id} ref={setShowRef}>
+                  {'Child Three'}
+                </span>
+              )}
+            </div>
+          );
+        }
+
+        const container = document.createElement('div');
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+        expect(Scheduler).toHaveYielded([
+          'Child One',
+          'Child Two',
+          'Child with ID',
+        ]);
+        expect(container.textContent).toEqual(
+          'Child OneChild TwoChild with ID',
+        );
+
+        const serverId = container
+          .getElementsByTagName('span')[2]
+          .getAttribute('id');
+        expect(serverId).not.toBeNull();
+
+        const childOneSpan = container.getElementsByTagName('span')[0];
+
+        const root = ReactDOM.createRoot(container, {hydrate: true});
+        root.render(<App show={false} />);
+        expect(Scheduler).toHaveYielded([]);
+
+        //Hydrate just child one before updating state
+        expect(Scheduler).toFlushAndYieldThrough(['Child One']);
+        expect(child1Ref.current).toBe(null);
+        expect(Scheduler).toHaveYielded([]);
+
+        ReactTestUtils.act(() => {
+          _setShow(true);
+
+          // State update should trigger the ID to update, which changes the props
+          // of ChildWithID. This should cause ChildWithID to hydrate before Children
+          expect(Scheduler).toFlushAndYieldThrough([
+            'Child with ID',
+            'Child with ID',
+            'Child with ID',
+            'Child One',
+            'Child Two',
+          ]);
+
+          expect(child1Ref.current).toBe(null);
+          expect(childWithIDRef.current).toEqual(
+            container.getElementsByTagName('span')[2],
+          );
+
+          expect(setShowRef.current).toEqual(
+            container.getElementsByTagName('span')[3],
+          );
+
+          expect(childWithIDRef.current.getAttribute('id')).toEqual(
+            setShowRef.current.getAttribute('aria-labelledby'),
+          );
+          expect(childWithIDRef.current.getAttribute('id')).not.toEqual(
+            serverId,
+          );
+        });
+
+        // Children hydrates after ChildWithID
+        expect(child1Ref.current).toBe(childOneSpan);
+
+        Scheduler.unstable_flushAll();
+
+        expect(Scheduler).toHaveYielded([]);
+      });
+
+      it('useOpaqueIdentifier: IDs match when part of the DOM tree is server rendered and part is client rendered', async () => {
+        let suspend = true;
+        let resolve;
+        const promise = new Promise(
+          resolvePromise => (resolve = resolvePromise),
+        );
+
+        function Child({text}) {
+          if (suspend) {
+            throw promise;
+          } else {
+            return text;
+          }
+        }
+
+        function RenderedChild() {
+          useEffect(() => {
+            Scheduler.unstable_yieldValue('Child did commit');
+          });
+          return null;
+        }
+
+        function App() {
+          const id = useOpaqueIdentifier();
+          useEffect(() => {
+            Scheduler.unstable_yieldValue('Did commit');
+          });
+          return (
+            <div>
+              <div id={id}>Child One</div>
+              <RenderedChild />
+              <React.Suspense fallback={'Fallback'}>
+                <div id={id}>
+                  <Child text="Child Two" />
+                </div>
+              </React.Suspense>
+            </div>
+          );
+        }
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+
+        suspend = true;
+        const root = ReactDOM.createRoot(container, {hydrate: true});
+        await ReactTestUtils.act(async () => {
+          root.render(<App />);
+        });
+        jest.runAllTimers();
+        expect(Scheduler).toHaveYielded(['Child did commit', 'Did commit']);
+        expect(Scheduler).toFlushAndYield([]);
+
+        const serverId = container.children[0].children[0].getAttribute('id');
+        expect(container.children[0].children.length).toEqual(1);
+        expect(
+          container.children[0].children[0].getAttribute('id'),
+        ).not.toBeNull();
+
+        await ReactTestUtils.act(async () => {
+          suspend = false;
+          resolve();
+          await promise;
+        });
+
+        expect(Scheduler).toHaveYielded(['Child did commit', 'Did commit']);
+        expect(Scheduler).toFlushAndYield([]);
+        jest.runAllTimers();
+
+        expect(container.children[0].children.length).toEqual(2);
+        expect(container.children[0].children[0].getAttribute('id')).toEqual(
+          container.children[0].children[1].getAttribute('id'),
+        );
+        expect(
+          container.children[0].children[0].getAttribute('id'),
+        ).not.toEqual(serverId);
+        expect(
+          container.children[0].children[0].getAttribute('id'),
+        ).not.toBeNull();
+      });
+
+      it('useOpaqueIdentifier warn when there is a hydration error', async () => {
+        function Child({appId}) {
+          return <div aria-labelledby={appId} />;
+        }
+        function App() {
+          const id = useOpaqueIdentifier();
+          return <Child appId={id} />;
+        }
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        // This is the wrong HTML string
+        container.innerHTML = '<span></span>';
+        ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+        expect(() =>
+          expect(() => Scheduler.unstable_flushAll()).toThrow(),
+        ).toErrorDev([
+          'Warning: Expected server HTML to contain a matching <div> in <div>.',
+        ]);
+      });
+
+      it('useOpaqueIdentifier: IDs match when part of the DOM tree is server rendered and part is client rendered', async () => {
+        let suspend = true;
+
+        function Child({text}) {
+          if (suspend) {
+            throw new Promise(() => {});
+          } else {
+            return text;
+          }
+        }
+
+        function RenderedChild() {
+          useEffect(() => {
+            Scheduler.unstable_yieldValue('Child did commit');
+          });
+          return null;
+        }
+
+        function App() {
+          const id = useOpaqueIdentifier();
+          useEffect(() => {
+            Scheduler.unstable_yieldValue('Did commit');
+          });
+          return (
+            <div>
+              <div id={id}>Child One</div>
+              <RenderedChild />
+              <React.Suspense fallback={'Fallback'}>
+                <div id={id}>
+                  <Child text="Child Two" />
+                </div>
+              </React.Suspense>
+            </div>
+          );
+        }
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+
+        suspend = false;
+        const root = ReactDOM.createRoot(container, {hydrate: true});
+        await ReactTestUtils.act(async () => {
+          root.render(<App />);
+        });
+        jest.runAllTimers();
+        expect(Scheduler).toHaveYielded([
+          'Child did commit',
+          'Did commit',
+          'Child did commit',
+          'Did commit',
+        ]);
+        expect(Scheduler).toFlushAndYield([]);
+
+        expect(container.children[0].children.length).toEqual(2);
+        expect(container.children[0].children[0].getAttribute('id')).toEqual(
+          container.children[0].children[1].getAttribute('id'),
+        );
+        expect(
+          container.children[0].children[0].getAttribute('id'),
+        ).not.toBeNull();
+      });
+
+      it('useOpaqueIdentifier warn when there is a hydration error', async () => {
+        function Child({appId}) {
+          return <div aria-labelledby={appId} />;
+        }
+        function App() {
+          const id = useOpaqueIdentifier();
+          return <Child appId={id} />;
+        }
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        // This is the wrong HTML string
+        container.innerHTML = '<span></span>';
+        ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+        expect(() =>
+          expect(() => Scheduler.unstable_flushAll()).toThrow(),
+        ).toErrorDev([
+          'Warning: Expected server HTML to contain a matching <div> in <div>.',
+        ]);
+      });
+
+      it('useOpaqueIdentifier throws when there is a hydration error and we are using ID as a string', async () => {
+        function Child({appId}) {
+          return <div aria-labelledby={appId + ''} />;
+        }
+        function App() {
+          const id = useOpaqueIdentifier();
+          return <Child appId={id} />;
+        }
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        // This is the wrong HTML string
+        container.innerHTML = '<span></span>';
+        ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+        expect(() =>
+          expect(() => Scheduler.unstable_flushAll()).toThrow(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+              'Do not read the value directly.',
+          ),
+        ).toErrorDev(
+          [
+            'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
+            'Warning: Did not expect server HTML to contain a <span> in <div>.',
+          ],
+          {withoutStack: 1},
+        );
+      });
+
+      it('useOpaqueIdentifier throws when there is a hydration error and we are using ID as a string', async () => {
+        function Child({appId}) {
+          return <div aria-labelledby={appId + ''} />;
+        }
+        function App() {
+          const id = useOpaqueIdentifier();
+          return <Child appId={id} />;
+        }
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        // This is the wrong HTML string
+        container.innerHTML = '<span></span>';
+        ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+        expect(() =>
+          expect(() => Scheduler.unstable_flushAll()).toThrow(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+              'Do not read the value directly.',
+          ),
+        ).toErrorDev(
+          [
+            'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
+            'Warning: Did not expect server HTML to contain a <span> in <div>.',
+          ],
+          {withoutStack: 1},
+        );
+      });
+
+      it('useOpaqueIdentifier throws if you try to use the result as a string in a child component', async () => {
+        function Child({appId}) {
+          return <div aria-labelledby={appId + ''} />;
+        }
+        function App() {
+          const id = useOpaqueIdentifier();
+          return <Child appId={id} />;
+        }
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+        ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+        expect(() =>
+          expect(() => Scheduler.unstable_flushAll()).toThrow(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+              'Do not read the value directly.',
+          ),
+        ).toErrorDev(
+          [
+            'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
+            'Warning: Did not expect server HTML to contain a <div> in <div>.',
+          ],
+          {withoutStack: 1},
+        );
+      });
+
+      it('useOpaqueIdentifier throws if you try to use the result as a string', async () => {
+        function App() {
+          const id = useOpaqueIdentifier();
+          return <div aria-labelledby={id + ''} />;
+        }
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+        ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+        expect(() =>
+          expect(() => Scheduler.unstable_flushAll()).toThrow(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+              'Do not read the value directly.',
+          ),
+        ).toErrorDev(
+          [
+            'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
+            'Warning: Did not expect server HTML to contain a <div> in <div>.',
+          ],
+          {withoutStack: 1},
+        );
+      });
+
+      it('useOpaqueIdentifier throws if you try to use the result as a string in a child component wrapped in a Suspense', async () => {
+        function Child({appId}) {
+          return <div aria-labelledby={appId + ''} />;
+        }
+        function App() {
+          const id = useOpaqueIdentifier();
+          return (
+            <React.Suspense fallback={null}>
+              <Child appId={id} />
+            </React.Suspense>
+          );
+        }
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
+
+        ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+
+        expect(() =>
+          expect(() => Scheduler.unstable_flushAll()).toThrow(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+              'Do not read the value directly.',
+          ),
+        ).toErrorDev([
+          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+            'Do not read the value directly.',
+          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+            'Do not read the value directly.',
+        ]);
+      });
+    });
+
+    it('useOpaqueIdentifier throws if you try to add the result as a number in a child component wrapped in a Suspense', async () => {
+      function Child({appId}) {
+        return <div aria-labelledby={+appId} />;
+      }
+      function App() {
+        const [show] = useState(false);
+        const id = useOpaqueIdentifier();
+        return (
+          <React.Suspense fallback={null}>
+            {show && <div id={id} />}
+            <Child appId={id} />
+          </React.Suspense>
+        );
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+
+      container.innerHTML = ReactDOMServer.renderToString(<App />);
+
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+
+      expect(() =>
+        expect(() => Scheduler.unstable_flushAll()).toThrow(
+          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+            'Do not read the value directly.',
+        ),
+      ).toErrorDev([
+        'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+          'Do not read the value directly.',
+        'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+          'Do not read the value directly.',
+      ]);
+    });
+
+    it('useOpaqueIdentifier with two opaque identifiers on the same page', () => {
+      let _setShow;
+
+      function App() {
+        const id1 = useOpaqueIdentifier();
+        const id2 = useOpaqueIdentifier();
+        const [show, setShow] = useState(true);
+        _setShow = setShow;
+
+        return (
+          <div>
+            <React.Suspense fallback={null}>
+              {show ? (
+                <span id={id1}>{'Child'}</span>
+              ) : (
+                <span id={id2}>{'Child'}</span>
+              )}
+            </React.Suspense>
+            <span aria-labelledby={id1}>{'test'}</span>
+          </div>
+        );
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+
+      container.innerHTML = ReactDOMServer.renderToString(<App />);
+
+      const serverID = container
+        .getElementsByTagName('span')[0]
+        .getAttribute('id');
+      expect(serverID).not.toBeNull();
+      expect(
+        container
+          .getElementsByTagName('span')[1]
+          .getAttribute('aria-labelledby'),
+      ).toEqual(serverID);
+
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+      jest.runAllTimers();
+      expect(Scheduler).toHaveYielded([]);
+      expect(Scheduler).toFlushAndYield([]);
+
+      ReactTestUtils.act(() => {
+        _setShow(false);
+      });
+
+      expect(
+        container
+          .getElementsByTagName('span')[1]
+          .getAttribute('aria-labelledby'),
+      ).toEqual(serverID);
+      expect(
+        container.getElementsByTagName('span')[0].getAttribute('id'),
+      ).not.toEqual(serverID);
+      expect(
+        container.getElementsByTagName('span')[0].getAttribute('id'),
+      ).not.toBeNull();
+    });
+  }
 });
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index 2fcf3d2efc37..2dcb1ace8ab9 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -20,6 +20,7 @@ import {
   disableJavaScriptURLs,
   enableTrustedTypesIntegration,
 } from 'shared/ReactFeatureFlags';
+import {isOpaqueHydratingObject} from './ReactDOMHostConfig';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
 
@@ -107,6 +108,13 @@ export function getValueForAttribute(
     if (!isAttributeNameSafe(name)) {
       return;
     }
+
+    // If the object is an opaque reference ID, it's expected that
+    // the next prop is different than the server value, so just return
+    // expected
+    if (isOpaqueHydratingObject(expected)) {
+      return expected;
+    }
     if (!node.hasAttribute(name)) {
       return expected === undefined ? undefined : null;
     }
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index e8a0396e24a3..2cd675a6f07a 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -84,6 +84,7 @@ import possibleStandardNames from '../shared/possibleStandardNames';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
+import {REACT_OPAQUE_OBJECT_TYPE} from 'shared/ReactSymbols';
 
 import {
   enableDeprecatedFlareAPI,
@@ -849,6 +850,15 @@ export function diffProperties(
         // to update this element.
         updatePayload = [];
       }
+    } else if (
+      typeof nextProp === 'object' &&
+      nextProp !== null &&
+      nextProp.$$typeof === REACT_OPAQUE_OBJECT_TYPE
+    ) {
+      // If we encounter useOpaqueReference's opaque object, this means we are hydrating.
+      // In this case, call the opaque object's toString function which generates a new client
+      // ID so client and server IDs match and throws to rerender.
+      nextProp.toString();
     } else {
       // For any other property we always add it to the queue and then we
       // filter it out using the whitelist during the commit.
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 05b6f50ebeb7..4b5551a19f93 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -57,7 +57,12 @@ import {
   DOCUMENT_FRAGMENT_NODE,
 } from '../shared/HTMLNodeType';
 import dangerousStyleValue from '../shared/dangerousStyleValue';
+import getComponentName from 'shared/getComponentName';
 
+import {
+  REACT_OPAQUE_OBJECT_TYPE,
+  REACT_OPAQUE_VALUE_TYPE,
+} from 'shared/ReactSymbols';
 import {
   mountEventResponder,
   unmountEventResponder,
@@ -73,6 +78,7 @@ import {
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
+import {getIsRendering} from 'react-reconciler/src/ReactCurrentFiber';
 import {
   RESPONDER_EVENT_SYSTEM,
   IS_PASSIVE,
@@ -150,6 +156,14 @@ export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 export type RendererInspectionConfig = $ReadOnly<{||}>;
 
+export opaque type OpaqueIDType =
+  | string
+  | {
+      $$typeof: number | Symbol,
+      toString: () => string | void,
+      valueOf: () => string | void,
+    };
+
 type SelectionInformation = {|
   activeElementDetached: null | HTMLElement,
   focusedElem: null | HTMLElement,
@@ -157,8 +171,12 @@ type SelectionInformation = {|
 |};
 
 let SUPPRESS_HYDRATION_WARNING;
+let didWarnAboutUseOpaqueIdentifier;
+let isUpdatingOpaqueValueInRenderPhase;
 if (__DEV__) {
   SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
+  didWarnAboutUseOpaqueIdentifier = {};
+  isUpdatingOpaqueValueInRenderPhase = false;
 }
 
 const SUSPENSE_START_DATA = '$';
@@ -1147,6 +1165,108 @@ export function getInstanceFromNode(node: HTMLElement): null | Object {
   return getClosestInstanceFromNode(node) || null;
 }
 
+let clientId: number = 0;
+export function makeClientId(): OpaqueIDType {
+  const id = 'r:' + (clientId++).toString(36);
+  return {
+    $$typeof: REACT_OPAQUE_VALUE_TYPE,
+    toString() {
+      if (__DEV__) {
+        if (getIsRendering()) {
+          console.error(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
+              'to attributes only. Do not read the value directly.',
+          );
+        }
+      }
+      return id;
+    },
+    valueOf() {
+      if (__DEV__) {
+        if (getIsRendering()) {
+          console.error(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
+              'to attributes only. Do not read the value directly.',
+          );
+        }
+      }
+      return id;
+    },
+  };
+}
+
+let serverId: number = 0;
+export function makeServerId(): OpaqueIDType {
+  return 'R:' + (serverId++).toString(36);
+}
+
+export function getIsUpdatingOpaqueValueInRenderPhase() {
+  if (__DEV__) {
+    return isUpdatingOpaqueValueInRenderPhase;
+  }
+}
+
+function setIsUpdatingOpaqueValueInRenderPhase(isUpdating: boolean) {
+  isUpdatingOpaqueValueInRenderPhase = isUpdating;
+}
+
+export function isOpaqueHydratingObject(value: mixed): boolean {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    value.$$typeof === REACT_OPAQUE_OBJECT_TYPE
+  );
+}
+
+export function makeOpaqueHydratingObject(
+  setId: () => void,
+  fiberType: mixed,
+): OpaqueIDType {
+  return {
+    $$typeof: REACT_OPAQUE_OBJECT_TYPE,
+    toString() {
+      if (__DEV__) {
+        const name = getComponentName(fiberType) || 'Unknown';
+        if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
+          console.error(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
+              'to attributes only. Do not read the value directly.',
+          );
+          didWarnAboutUseOpaqueIdentifier[name] = true;
+        }
+      }
+
+      setIsUpdatingOpaqueValueInRenderPhase(true);
+      setId();
+      setIsUpdatingOpaqueValueInRenderPhase(false);
+      throw new Error(
+        'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
+          'to attributes only. Do not read the value directly.',
+      );
+    },
+    valueOf() {
+      if (__DEV__) {
+        const name = getComponentName(fiberType) || 'Unknown';
+        if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
+          console.error(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
+              'to attributes only. Do not read the value directly.',
+          );
+          didWarnAboutUseOpaqueIdentifier[name] = true;
+        }
+      }
+
+      setIsUpdatingOpaqueValueInRenderPhase(true);
+      setId();
+      setIsUpdatingOpaqueValueInRenderPhase(false);
+      throw new Error(
+        'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
+          'to attributes only. Do not read the value directly.',
+      );
+    },
+  };
+}
+
 export function registerEvent(
   event: ReactDOMListenerEvent,
   rootContainerInstance: Container,
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 963c025bb7bc..0ccbf9f41e77 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -12,6 +12,8 @@ import type {
   TimeoutConfig,
 } from 'react-reconciler/src/ReactFiberHooks';
 import type {ThreadID} from './ReactThreadIDAllocator';
+import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
+
 import type {
   MutableSource,
   MutableSourceGetSnapshotFn,
@@ -23,6 +25,7 @@ import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig
 import type {ReactDOMListenerMap} from '../shared/ReactDOMTypes';
 
 import {validateContextBounds} from './ReactPartialRendererContext';
+import {makeServerId} from '../client/ReactDOMHostConfig';
 
 import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
@@ -491,6 +494,10 @@ function useTransition(
   return [startTransition, false];
 }
 
+function useOpaqueIdentifier(): OpaqueIDType {
+  return makeServerId();
+}
+
 function useEvent(event: any): ReactDOMListenerMap {
   return {
     clear: noop,
@@ -525,6 +532,7 @@ export const Dispatcher: DispatcherType = {
   useDeferredValue,
   useTransition,
   useEvent,
+  useOpaqueIdentifier,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
 };
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index cd77692132cc..e3b137dbbf75 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -80,6 +80,7 @@ export type NoTimeout = -1;
 export type ReactListenerEvent = Object;
 export type ReactListenerMap = Object;
 export type ReactListener = Object;
+export type OpaqueIDType = void;
 
 export type RendererInspectionConfig = $ReadOnly<{|
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
@@ -486,6 +487,29 @@ export function beforeRemoveInstance(instance: any) {
   // noop
 }
 
+export function isOpaqueHydratingObject(value: mixed): boolean {
+  throw new Error('Not yet implemented');
+}
+
+export function makeOpaqueHydratingObject(
+  setId: () => void,
+  fiberType: mixed,
+): OpaqueIDType {
+  throw new Error('Not yet implemented.');
+}
+
+export function getIsUpdatingOpaqueValueInRenderPhase() {
+  // noop
+}
+
+export function makeClientId(): OpaqueIDType {
+  throw new Error('Not yet implemented');
+}
+
+export function makeServerId(): OpaqueIDType {
+  throw new Error('Not yet implemented');
+}
+
 export function registerEvent(event: any, rootContainerInstance: Container) {
   throw new Error('Not yet implemented.');
 }
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 990c4d2123a3..deb3a6dfeffe 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -47,6 +47,7 @@ export type ChildSet = void; // Unused
 
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
+export type OpaqueIDType = void;
 
 export type RendererInspectionConfig = $ReadOnly<{|
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
@@ -535,6 +536,29 @@ export function beforeRemoveInstance(instance: any) {
   // noop
 }
 
+export function isOpaqueHydratingObject(value: mixed): boolean {
+  throw new Error('Not yet implemented');
+}
+
+export function makeOpaqueHydratingObject(
+  setId: () => void,
+  fiberType: mixed,
+): OpaqueIDType {
+  throw new Error('Not yet implemented.');
+}
+
+export function getIsUpdatingOpaqueValueInRenderPhase() {
+  // noop
+}
+
+export function makeClientId(): OpaqueIDType {
+  throw new Error('Not yet implemented');
+}
+
+export function makeServerId(): OpaqueIDType {
+  throw new Error('Not yet implemented');
+}
+
 export function registerEvent(event: any, rootContainerInstance: Container) {
   throw new Error('Not yet implemented.');
 }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 546edf2ae1a4..5677ea4903c0 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -439,6 +439,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     beforeRemoveInstance(instance: any): void {
       // NO-OP
     },
+
+    getIsUpdatingOpaqueValueInRenderPhase() {
+      return false;
+    },
   };
 
   const hostConfig = useMutation
diff --git a/packages/react-reconciler/src/ReactCurrentFiber.js b/packages/react-reconciler/src/ReactCurrentFiber.js
index 617dd1ff87f3..dfdf67e692b0 100644
--- a/packages/react-reconciler/src/ReactCurrentFiber.js
+++ b/packages/react-reconciler/src/ReactCurrentFiber.js
@@ -103,3 +103,9 @@ export function setIsRendering(rendering: boolean) {
     isRendering = rendering;
   }
 }
+
+export function getIsRendering() {
+  if (__DEV__) {
+    return isRendering;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index 580311570542..0898027c854b 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -23,6 +23,7 @@ import type {SuspenseConfig} from './ReactFiberSuspenseConfig';
 import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';
 import type {FiberRoot} from './ReactFiberRoot';
 import type {
+  OpaqueIDType,
   ReactListenerEvent,
   ReactListenerMap,
   ReactListener,
@@ -33,6 +34,7 @@ import {enableUseEventAPI} from 'shared/ReactFeatureFlags';
 
 import {markRootExpiredAtTime} from './ReactFiberRoot';
 import {NoWork, Sync} from './ReactFiberExpirationTime';
+import {NoMode, BlockingMode} from './ReactTypeOfMode';
 import {readContext} from './ReactFiberNewContext';
 import {createDeprecatedResponderListener} from './ReactFiberDeprecatedEvents';
 import {
@@ -74,6 +76,8 @@ import {
   runWithPriority,
   getCurrentPriorityLevel,
 } from './SchedulerWithReactIntegration';
+import {getIsHydrating} from './ReactFiberHydrationContext';
+import {makeClientId, makeOpaqueHydratingObject} from './ReactFiberHostConfig';
 import {
   getLastPendingExpirationTime,
   getWorkInProgressVersion,
@@ -132,8 +136,14 @@ export type Dispatcher = {|
     subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
   ): Snapshot,
   useEvent(event: ReactListenerEvent): ReactListenerMap,
+  useOpaqueIdentifier(): OpaqueIDType | void,
 |};
 
+export type IdObject = {
+  $$typeof: Symbol | number,
+  _setId: () => void,
+};
+
 type Update<S, A> = {|
   expirationTime: ExpirationTime,
   suspenseConfig: null | SuspenseConfig,
@@ -166,7 +176,8 @@ export type HookType =
   | 'useDeferredValue'
   | 'useTransition'
   | 'useMutableSource'
-  | 'useEvent';
+  | 'useEvent'
+  | 'useOpaqueIdentifier';
 
 let didWarnAboutMismatchedHooksForComponent;
 if (__DEV__) {
@@ -1569,6 +1580,46 @@ function rerenderTransition(
   return [start, isPending];
 }
 
+function mountOpaqueIdentifier(): OpaqueIDType | void {
+  let hasSetId = false;
+
+  const [id, setId] = mountState(() => {
+    if (getIsHydrating()) {
+      return makeOpaqueHydratingObject(() => {
+        if (!hasSetId) {
+          setId(() => makeClientId());
+          hasSetId = true;
+        }
+      }, currentlyRenderingFiber.type);
+    } else {
+      return makeClientId();
+    }
+  });
+
+  if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
+    mountEffect(() => {
+      setId(() => makeClientId());
+    });
+  }
+  return id;
+}
+
+function updateOpaqueIdentifier(): OpaqueIDType | void {
+  const id = updateState(undefined)[0];
+  if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
+    updateEffect(() => {});
+  }
+  return id;
+}
+
+function rerenderOpaqueIdentifier(): OpaqueIDType | void {
+  const id = rerenderState(undefined)[0];
+  if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
+    updateEffect(() => {});
+  }
+  return id;
+}
+
 function dispatchAction<S, A>(
   fiber: Fiber,
   queue: UpdateQueue<S, A>,
@@ -1848,6 +1899,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
   useEvent: throwInvalidHookError,
+  useOpaqueIdentifier: throwInvalidHookError,
 };
 
 const HooksDispatcherOnMount: Dispatcher = {
@@ -1868,6 +1920,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useTransition: mountTransition,
   useMutableSource: mountMutableSource,
   useEvent: mountEventListener,
+  useOpaqueIdentifier: mountOpaqueIdentifier,
 };
 
 const HooksDispatcherOnUpdate: Dispatcher = {
@@ -1888,6 +1941,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useTransition: updateTransition,
   useMutableSource: updateMutableSource,
   useEvent: updateEventListener,
+  useOpaqueIdentifier: updateOpaqueIdentifier,
 };
 
 const HooksDispatcherOnRerender: Dispatcher = {
@@ -1908,6 +1962,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
   useEvent: updateEventListener,
+  useOpaqueIdentifier: rerenderOpaqueIdentifier,
 };
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
@@ -1944,7 +1999,6 @@ if (__DEV__) {
     ): T {
       return readContext(context, observedBits);
     },
-
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
       mountHookTypesDev();
@@ -2071,6 +2125,11 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountEventListener(event);
     },
+    useOpaqueIdentifier(): OpaqueIDType | void {
+      currentHookNameInDev = 'useOpaqueIdentifier';
+      mountHookTypesDev();
+      return mountOpaqueIdentifier();
+    },
   };
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
@@ -2080,7 +2139,6 @@ if (__DEV__) {
     ): T {
       return readContext(context, observedBits);
     },
-
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
       updateHookTypesDev();
@@ -2202,6 +2260,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountEventListener(event);
     },
+    useOpaqueIdentifier(): OpaqueIDType | void {
+      currentHookNameInDev = 'useOpaqueIdentifier';
+      updateHookTypesDev();
+      return mountOpaqueIdentifier();
+    },
   };
 
   HooksDispatcherOnUpdateInDEV = {
@@ -2211,7 +2274,6 @@ if (__DEV__) {
     ): T {
       return readContext(context, observedBits);
     },
-
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
       updateHookTypesDev();
@@ -2333,6 +2395,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateEventListener(event);
     },
+    useOpaqueIdentifier(): OpaqueIDType | void {
+      currentHookNameInDev = 'useOpaqueIdentifier';
+      updateHookTypesDev();
+      return updateOpaqueIdentifier();
+    },
   };
 
   HooksDispatcherOnRerenderInDEV = {
@@ -2464,6 +2531,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateEventListener(event);
     },
+    useOpaqueIdentifier(): OpaqueIDType | void {
+      currentHookNameInDev = 'useOpaqueIdentifier';
+      updateHookTypesDev();
+      return rerenderOpaqueIdentifier();
+    },
   };
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
@@ -2474,7 +2546,6 @@ if (__DEV__) {
       warnInvalidContextAccess();
       return readContext(context, observedBits);
     },
-
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
       warnInvalidHookAccess();
@@ -2611,6 +2682,12 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountEventListener(event);
     },
+    useOpaqueIdentifier(): OpaqueIDType | void {
+      currentHookNameInDev = 'useOpaqueIdentifier';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountOpaqueIdentifier();
+    },
   };
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
@@ -2621,7 +2698,6 @@ if (__DEV__) {
       warnInvalidContextAccess();
       return readContext(context, observedBits);
     },
-
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
       warnInvalidHookAccess();
@@ -2758,6 +2834,12 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateEventListener(event);
     },
+    useOpaqueIdentifier(): OpaqueIDType | void {
+      currentHookNameInDev = 'useOpaqueIdentifier';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateOpaqueIdentifier();
+    },
   };
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
@@ -2905,5 +2987,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateEventListener(event);
     },
+    useOpaqueIdentifier(): OpaqueIDType | void {
+      currentHookNameInDev = 'useOpaqueIdentifier';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return rerenderOpaqueIdentifier();
+    },
   };
 }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
index 365bfb48dea3..7f06c4d0ed60 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -485,9 +485,14 @@ function resetHydrationState(): void {
   isHydrating = false;
 }
 
+function getIsHydrating(): boolean {
+  return isHydrating;
+}
+
 export {
   warnIfHydrating,
   enterHydrationState,
+  getIsHydrating,
   reenterHydrationStateFromDehydratedSuspenseInstance,
   resetHydrationState,
   tryToClaimNextHydratableInstance,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index 5aab14db944b..0a95b15e9916 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -63,6 +63,7 @@ import {
   cancelTimeout,
   noTimeout,
   warnsIfNotActing,
+  getIsUpdatingOpaqueValueInRenderPhase,
 } from './ReactFiberHostConfig';
 
 import {createWorkInProgress, assignFiberPropertiesInDEV} from './ReactFiber';
@@ -2842,7 +2843,8 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   if (__DEV__) {
     if (
       ReactCurrentDebugFiberIsRenderingInDEV &&
-      (executionContext & RenderContext) !== NoContext
+      (executionContext & RenderContext) !== NoContext &&
+      !getIsUpdatingOpaqueValueInRenderPhase()
     ) {
       switch (fiber.tag) {
         case FunctionComponent:
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index dc4517013450..78f520fbe27d 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -38,6 +38,7 @@ export opaque type ChildSet = mixed; // eslint-disable-line no-undef
 export opaque type TimeoutHandle = mixed; // eslint-disable-line no-undef
 export opaque type NoTimeout = mixed; // eslint-disable-line no-undef
 export opaque type RendererInspectionConfig = mixed; // eslint-disable-line no-undef
+export opaque type OpaqueIDType = mixed;
 export type EventResponder = any;
 export type ReactListenerEvent = Object;
 export type ReactListenerMap = Object;
@@ -82,6 +83,13 @@ export const mountEventListener = $$$hostConfig.mountEventListener;
 export const unmountEventListener = $$$hostConfig.unmountEventListener;
 export const validateEventListenerTarget =
   $$$hostConfig.validateEventListenerTarget;
+export const isOpaqueHydratingObject = $$$hostConfig.isOpaqueHydratingObject;
+export const makeOpaqueHydratingObject =
+  $$$hostConfig.makeOpaqueHydratingObject;
+export const getIsUpdatingOpaqueValueInRenderPhase =
+  $$$hostConfig.getIsUpdatingOpaqueValueInRenderPhase;
+export const makeClientId = $$$hostConfig.makeClientId;
+export const makeServerId = $$$hostConfig.makeServerId;
 
 // -------------------
 //      Mutation
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index f4f66a3cd1c0..1b388e76cb4e 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -14,6 +14,7 @@ import type {
 } from 'shared/ReactTypes';
 
 import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
+import {REACT_OPAQUE_OBJECT_TYPE} from 'shared/ReactSymbols';
 
 export type Type = string;
 export type Props = Object;
@@ -44,6 +45,12 @@ export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 export type EventResponder = any;
+export opaque type OpaqueIDType =
+  | string
+  | {
+      $$typeof: Symbol | number,
+      _setId(): void,
+    };
 
 export type ReactListenerEvent = Object;
 export type ReactListenerMap = Object;
@@ -381,6 +388,67 @@ export function beforeRemoveInstance(instance: any) {
   // noop
 }
 
+let clientId: number = 0;
+export function makeClientId(): OpaqueIDType {
+  return 'c_' + (clientId++).toString(36);
+}
+
+let serverId: number = 0;
+export function makeServerId(): OpaqueIDType {
+  return 's_' + (serverId++).toString(36);
+}
+
+export function isOpaqueHydratingObject(value: mixed): boolean {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    value.$$typeof === REACT_OPAQUE_OBJECT_TYPE
+  );
+}
+
+export function makeOpaqueHydratingObject(
+  setId: () => void,
+  fiberType: mixed,
+): OpaqueIDType {
+  return {
+    $$typeof: REACT_OPAQUE_OBJECT_TYPE,
+    _setId: setId,
+    toString() {
+      setIsUpdatingOpaqueValueInRenderPhase(true);
+      setId();
+      setIsUpdatingOpaqueValueInRenderPhase(false);
+      throw new Error(
+        'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
+          'to attributes only. Do not read the value directly.',
+      );
+    },
+    valueOf() {
+      setIsUpdatingOpaqueValueInRenderPhase(true);
+      setId();
+      setIsUpdatingOpaqueValueInRenderPhase(false);
+      throw new Error(
+        'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
+          'to attributes only. Do not read the value directly.',
+      );
+    },
+  };
+}
+
+let isUpdatingOpaqueValueInRenderPhase;
+if (__DEV__) {
+  isUpdatingOpaqueValueInRenderPhase = false;
+}
+
+export function getIsUpdatingOpaqueValueInRenderPhase() {
+  if (__DEV__) {
+    return isUpdatingOpaqueValueInRenderPhase;
+  }
+}
+
+function setIsUpdatingOpaqueValueInRenderPhase(isUpdating) {
+  isUpdatingOpaqueValueInRenderPhase = isUpdating;
+}
+
 export function registerEvent(event: any, rootContainerInstance: Container) {
   throw new Error('Not yet implemented.');
 }
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index ca2834be0fca..d9eff8a364fa 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -50,5 +50,6 @@ export {
   DEPRECATED_createResponder,
   // enableScopeAPI
   unstable_createScope,
+  useOpaqueIdentifier,
 } from './src/React';
 export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 79f1e235fe74..71823b6d7d33 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -45,4 +45,5 @@ export {
   unstable_withSuspenseConfig,
   // enableBlocksAPI
   block,
+  useOpaqueIdentifier,
 } from './src/React';
diff --git a/packages/react/index.js b/packages/react/index.js
index f97dd1fc0cd4..f397624087fd 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -72,6 +72,7 @@ export {
   SuspenseList,
   unstable_withSuspenseConfig,
   block,
+  useOpaqueIdentifier,
   DEPRECATED_useResponder,
   DEPRECATED_createResponder,
   unstable_createFundamental,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index c42da6dd343a..873bb411a8c5 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -49,5 +49,6 @@ export {
   DEPRECATED_createResponder,
   // enableScopeAPI
   unstable_createScope,
+  useOpaqueIdentifier,
 } from './src/React';
 export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 8484ef5886e9..79938ec51f79 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -45,6 +45,7 @@ import {
   useResponder,
   useTransition,
   useDeferredValue,
+  useOpaqueIdentifier,
 } from './ReactHooks';
 import {withSuspenseConfig} from './ReactBatchConfig';
 import {
@@ -117,4 +118,5 @@ export {
   createFundamental as unstable_createFundamental,
   // enableScopeAPI
   createScope as unstable_createScope,
+  useOpaqueIdentifier,
 };
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 38a6a363481b..acc47e1d6b9f 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -15,6 +15,8 @@ import type {
   ReactEventResponder,
   ReactEventResponderListener,
 } from 'shared/ReactTypes';
+import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
+
 import invariant from 'shared/invariant';
 import {REACT_RESPONDER_TYPE} from 'shared/ReactSymbols';
 
@@ -181,6 +183,11 @@ export function useDeferredValue<T>(value: T, config: ?Object): T {
   return dispatcher.useDeferredValue(value, config);
 }
 
+export function useOpaqueIdentifier(): OpaqueIDType | void {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useOpaqueIdentifier();
+}
+
 export function useMutableSource<Source, Snapshot>(
   source: MutableSource<Source>,
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 77979459e962..39431b266b1b 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -26,6 +26,8 @@ export let REACT_SERVER_BLOCK_TYPE = 0xeada;
 export let REACT_FUNDAMENTAL_TYPE = 0xead5;
 export let REACT_RESPONDER_TYPE = 0xead6;
 export let REACT_SCOPE_TYPE = 0xead7;
+export let REACT_OPAQUE_OBJECT_TYPE = 0xeae0;
+export let REACT_OPAQUE_VALUE_TYPE = 0xeae1;
 
 if (typeof Symbol === 'function' && Symbol.for) {
   const symbolFor = Symbol.for;
@@ -46,6 +48,8 @@ if (typeof Symbol === 'function' && Symbol.for) {
   REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
   REACT_RESPONDER_TYPE = symbolFor('react.responder');
   REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_OBJECT_TYPE = symbolFor('react.opaqueObject');
+  REACT_OPAQUE_VALUE_TYPE = symbolFor('react.opaqueValue');
 }
 
 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index e8f9108d92fc..49d179af10be 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -351,5 +351,6 @@
   "351": "Unsupported type.",
   "352": "React Blocks (and Lazy Components) are expected to be replaced by a compiler on the server. Try configuring your compiler set up and avoid using React.lazy inside of Blocks.",
   "353": "A server block should never encode any other slots. This is a bug in React.",
-  "354": "getInspectorDataForViewAtPoint() is not available in production."
+  "354": "getInspectorDataForViewAtPoint() is not available in production.",
+  "355": "The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly."
 }

From 55c1b1c11beb1bc609b0ddf0bb21ff75c3372614 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 3 Apr 2020 11:56:14 -0700
Subject: [PATCH 2/7] Remove $$typeof from client-generated id

Not used anywhere
---
 packages/react-dom/src/client/ReactDOMHostConfig.js | 7 +------
 packages/shared/ReactSymbols.js                     | 2 --
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 4b5551a19f93..6d18bd77e0b6 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -59,10 +59,7 @@ import {
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 import getComponentName from 'shared/getComponentName';
 
-import {
-  REACT_OPAQUE_OBJECT_TYPE,
-  REACT_OPAQUE_VALUE_TYPE,
-} from 'shared/ReactSymbols';
+import {REACT_OPAQUE_OBJECT_TYPE} from 'shared/ReactSymbols';
 import {
   mountEventResponder,
   unmountEventResponder,
@@ -159,7 +156,6 @@ export type RendererInspectionConfig = $ReadOnly<{||}>;
 export opaque type OpaqueIDType =
   | string
   | {
-      $$typeof: number | Symbol,
       toString: () => string | void,
       valueOf: () => string | void,
     };
@@ -1169,7 +1165,6 @@ let clientId: number = 0;
 export function makeClientId(): OpaqueIDType {
   const id = 'r:' + (clientId++).toString(36);
   return {
-    $$typeof: REACT_OPAQUE_VALUE_TYPE,
     toString() {
       if (__DEV__) {
         if (getIsRendering()) {
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 39431b266b1b..2bf93122d26d 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -27,7 +27,6 @@ export let REACT_FUNDAMENTAL_TYPE = 0xead5;
 export let REACT_RESPONDER_TYPE = 0xead6;
 export let REACT_SCOPE_TYPE = 0xead7;
 export let REACT_OPAQUE_OBJECT_TYPE = 0xeae0;
-export let REACT_OPAQUE_VALUE_TYPE = 0xeae1;
 
 if (typeof Symbol === 'function' && Symbol.for) {
   const symbolFor = Symbol.for;
@@ -49,7 +48,6 @@ if (typeof Symbol === 'function' && Symbol.for) {
   REACT_RESPONDER_TYPE = symbolFor('react.responder');
   REACT_SCOPE_TYPE = symbolFor('react.scope');
   REACT_OPAQUE_OBJECT_TYPE = symbolFor('react.opaqueObject');
-  REACT_OPAQUE_VALUE_TYPE = symbolFor('react.opaqueValue');
 }
 
 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;

From bd02e232257dde949eac156a3f535434544395b5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 3 Apr 2020 12:10:38 -0700
Subject: [PATCH 3/7] Return string in DEV

The wrapper object is only used to warn if the value is accessed.

This means `typeof` will be different between dev and prod.
---
 .../src/client/ReactDOMHostConfig.js          | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 6d18bd77e0b6..4ec2761e707e 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -1164,30 +1164,25 @@ export function getInstanceFromNode(node: HTMLElement): null | Object {
 let clientId: number = 0;
 export function makeClientId(): OpaqueIDType {
   const id = 'r:' + (clientId++).toString(36);
-  return {
-    toString() {
-      if (__DEV__) {
-        if (getIsRendering()) {
-          console.error(
-            'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
-              'to attributes only. Do not read the value directly.',
-          );
-        }
-      }
-      return id;
-    },
-    valueOf() {
-      if (__DEV__) {
-        if (getIsRendering()) {
-          console.error(
-            'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
-              'to attributes only. Do not read the value directly.',
-          );
-        }
+  if (__DEV__) {
+    const warnOnAccess = () => {
+      // TODO: Should warn in effects and callbacks, too
+      if (getIsRendering()) {
+        console.error(
+          'The object passed back from useOpaqueIdentifier is meant to be ' +
+            'passed through to attributes only. Do not read the ' +
+            'value directly.',
+        );
       }
       return id;
-    },
-  };
+    };
+    return {
+      toString: warnOnAccess,
+      valueOf: warnOnAccess,
+    };
+  } else {
+    return id;
+  }
 }
 
 let serverId: number = 0;

From 68ff9cb39c715eb044d064bfbae580f5b76f0fff Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 3 Apr 2020 12:14:00 -0700
Subject: [PATCH 4/7] react.opaqueObject -> react.opaque.id

---
 packages/react-debug-tools/src/ReactDebugHooks.js       | 4 ++--
 packages/react-dom/src/client/ReactDOMComponent.js      | 4 ++--
 packages/react-dom/src/client/ReactDOMHostConfig.js     | 6 +++---
 packages/react-test-renderer/src/ReactTestHostConfig.js | 6 +++---
 packages/shared/ReactSymbols.js                         | 4 ++--
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index c175eb500b6c..7b34a50394e2 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -27,7 +27,7 @@ import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {REACT_OPAQUE_OBJECT_TYPE} from 'shared/ReactSymbols';
+import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
   FunctionComponent,
   SimpleMemoComponent,
@@ -331,7 +331,7 @@ function useOpaqueIdentifier(): OpaqueIDType | void {
     nextHook(); // Effect
   }
   let value = hook === null ? undefined : hook.memoizedState;
-  if (value && value.$$typeof === REACT_OPAQUE_OBJECT_TYPE) {
+  if (value && value.$$typeof === REACT_OPAQUE_ID_TYPE) {
     value = undefined;
   }
   hookLog.push({
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 2cd675a6f07a..2f0190084ba5 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -84,7 +84,7 @@ import possibleStandardNames from '../shared/possibleStandardNames';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
-import {REACT_OPAQUE_OBJECT_TYPE} from 'shared/ReactSymbols';
+import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 
 import {
   enableDeprecatedFlareAPI,
@@ -853,7 +853,7 @@ export function diffProperties(
     } else if (
       typeof nextProp === 'object' &&
       nextProp !== null &&
-      nextProp.$$typeof === REACT_OPAQUE_OBJECT_TYPE
+      nextProp.$$typeof === REACT_OPAQUE_ID_TYPE
     ) {
       // If we encounter useOpaqueReference's opaque object, this means we are hydrating.
       // In this case, call the opaque object's toString function which generates a new client
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 4ec2761e707e..730a69c422a2 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -59,7 +59,7 @@ import {
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 import getComponentName from 'shared/getComponentName';
 
-import {REACT_OPAQUE_OBJECT_TYPE} from 'shared/ReactSymbols';
+import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
   mountEventResponder,
   unmountEventResponder,
@@ -1204,7 +1204,7 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
   return (
     value !== null &&
     typeof value === 'object' &&
-    value.$$typeof === REACT_OPAQUE_OBJECT_TYPE
+    value.$$typeof === REACT_OPAQUE_ID_TYPE
   );
 }
 
@@ -1213,7 +1213,7 @@ export function makeOpaqueHydratingObject(
   fiberType: mixed,
 ): OpaqueIDType {
   return {
-    $$typeof: REACT_OPAQUE_OBJECT_TYPE,
+    $$typeof: REACT_OPAQUE_ID_TYPE,
     toString() {
       if (__DEV__) {
         const name = getComponentName(fiberType) || 'Unknown';
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 1b388e76cb4e..120ccb5b2217 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -14,7 +14,7 @@ import type {
 } from 'shared/ReactTypes';
 
 import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
-import {REACT_OPAQUE_OBJECT_TYPE} from 'shared/ReactSymbols';
+import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 
 export type Type = string;
 export type Props = Object;
@@ -402,7 +402,7 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
   return (
     value !== null &&
     typeof value === 'object' &&
-    value.$$typeof === REACT_OPAQUE_OBJECT_TYPE
+    value.$$typeof === REACT_OPAQUE_ID_TYPE
   );
 }
 
@@ -411,7 +411,7 @@ export function makeOpaqueHydratingObject(
   fiberType: mixed,
 ): OpaqueIDType {
   return {
-    $$typeof: REACT_OPAQUE_OBJECT_TYPE,
+    $$typeof: REACT_OPAQUE_ID_TYPE,
     _setId: setId,
     toString() {
       setIsUpdatingOpaqueValueInRenderPhase(true);
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 2bf93122d26d..53c994cf3bfe 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -26,7 +26,7 @@ export let REACT_SERVER_BLOCK_TYPE = 0xeada;
 export let REACT_FUNDAMENTAL_TYPE = 0xead5;
 export let REACT_RESPONDER_TYPE = 0xead6;
 export let REACT_SCOPE_TYPE = 0xead7;
-export let REACT_OPAQUE_OBJECT_TYPE = 0xeae0;
+export let REACT_OPAQUE_ID_TYPE = 0xeae0;
 
 if (typeof Symbol === 'function' && Symbol.for) {
   const symbolFor = Symbol.for;
@@ -47,7 +47,7 @@ if (typeof Symbol === 'function' && Symbol.for) {
   REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
   REACT_RESPONDER_TYPE = symbolFor('react.responder');
   REACT_SCOPE_TYPE = symbolFor('react.scope');
-  REACT_OPAQUE_OBJECT_TYPE = symbolFor('react.opaqueObject');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
 }
 
 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;

From cd64a0f6d137fb188f8eddd7e0b8a2205945127e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 3 Apr 2020 16:52:49 -0700
Subject: [PATCH 5/7] Use pushEffect instead of effect hook

Effect is only need on initial mount, and only when hydrating, so we can
optimize this a bit.
---
 .../react-reconciler/src/ReactFiberHooks.js   | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index 0898027c854b..70f8e62b3aa9 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -1581,42 +1581,46 @@ function rerenderTransition(
 }
 
 function mountOpaqueIdentifier(): OpaqueIDType | void {
-  let hasSetId = false;
-
-  const [id, setId] = mountState(() => {
-    if (getIsHydrating()) {
-      return makeOpaqueHydratingObject(() => {
-        if (!hasSetId) {
-          setId(() => makeClientId());
-          hasSetId = true;
-        }
-      }, currentlyRenderingFiber.type);
-    } else {
-      return makeClientId();
+  if (getIsHydrating()) {
+    let didUpgrade = false;
+    const id = makeOpaqueHydratingObject(() => {
+      if (!didUpgrade) {
+        // Only upgrade once. This works even inside the render phase because
+        // the update is added to a shared queue, which outlasts the
+        // in-progress render.
+        didUpgrade = true;
+        setId(makeClientId());
+      }
+    }, currentlyRenderingFiber.type);
+
+    const setId = mountState(id)[1];
+
+    if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
+      currentlyRenderingFiber.effectTag |= UpdateEffect | PassiveEffect;
+      pushEffect(
+        HookHasEffect | HookPassive,
+        () => {
+          setId(makeClientId());
+        },
+        undefined,
+        null,
+      );
     }
-  });
-
-  if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-    mountEffect(() => {
-      setId(() => makeClientId());
-    });
+    return id;
+  } else {
+    const id = makeClientId();
+    mountState(id);
+    return id;
   }
-  return id;
 }
 
 function updateOpaqueIdentifier(): OpaqueIDType | void {
   const id = updateState(undefined)[0];
-  if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-    updateEffect(() => {});
-  }
   return id;
 }
 
 function rerenderOpaqueIdentifier(): OpaqueIDType | void {
   const id = rerenderState(undefined)[0];
-  if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-    updateEffect(() => {});
-  }
   return id;
 }
 

From 2d9cb27f998e6c2f6339c52b41e7ec797c24dd77 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 6 Apr 2020 13:10:05 -0700
Subject: [PATCH 6/7] Remove deep import of `getIsRendering` internal

Shuffles boundary between host config and renderer so that this deep
import is no longer necessary.
---
 packages/react-art/src/ReactARTHostConfig.js  | 10 +-
 .../ReactHooksInspectionIntegration-test.js   |  6 +-
 ...DOMServerIntegrationHooks-test.internal.js |  4 -
 .../src/client/ReactDOMHostConfig.js          | 92 ++++---------------
 .../src/ReactFabricHostConfig.js              |  9 +-
 .../src/ReactNativeHostConfig.js              |  9 +-
 .../src/createReactNoop.js                    |  4 -
 .../react-reconciler/src/ReactFiberHooks.js   | 69 +++++++++++---
 .../src/ReactFiberWorkLoop.js                 |  9 +-
 .../src/forks/ReactFiberHostConfig.custom.js  |  3 +-
 .../src/ReactTestHostConfig.js                | 57 ++++--------
 11 files changed, 116 insertions(+), 156 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 68ade06d528e..e0e883c4b21b 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -474,15 +474,17 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
   throw new Error('Not yet implemented');
 }
 
-export function makeOpaqueHydratingObject(setId): OpaqueIDType {
+export function makeOpaqueHydratingObject(
+  attemptToReadValue: () => void,
+): OpaqueIDType {
   throw new Error('Not yet implemented.');
 }
 
-export function getIsUpdatingOpaqueValueInRenderPhase(setId) {
-  // noop
+export function makeClientId(): OpaqueIDType {
+  throw new Error('Not yet implemented');
 }
 
-export function makeClientId(): OpaqueIDType {
+export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
   throw new Error('Not yet implemented');
 }
 
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index a1c81eaa7cec..9f79be984c8d 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -439,8 +439,7 @@ describe('ReactHooksInspectionIntegration', () => {
       expect(tree[0].id).toEqual(0);
       expect(tree[0].isStateEditable).toEqual(false);
       expect(tree[0].name).toEqual('OpaqueIdentifier');
-      expect(typeof tree[0].value).toBe('string');
-      expect(tree[0].value.startsWith('c_')).toBe(true);
+      expect((tree[0].value + '').startsWith('c_')).toBe(true);
 
       expect(tree[1]).toEqual({
         id: 1,
@@ -471,8 +470,7 @@ describe('ReactHooksInspectionIntegration', () => {
       expect(tree[0].id).toEqual(0);
       expect(tree[0].isStateEditable).toEqual(false);
       expect(tree[0].name).toEqual('OpaqueIdentifier');
-      expect(typeof tree[0].value).toBe('string');
-      expect(tree[0].value.startsWith('c_')).toBe(true);
+      expect((tree[0].value + '').startsWith('c_')).toBe(true);
 
       expect(tree[1]).toEqual({
         id: 1,
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
index 496c41f57b62..47d2e7e1e3a3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
@@ -1643,8 +1643,6 @@ describe('ReactDOMServerHooks', () => {
         ).toErrorDev([
           'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
             'Do not read the value directly.',
-          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-            'Do not read the value directly.',
         ]);
       });
     });
@@ -1679,8 +1677,6 @@ describe('ReactDOMServerHooks', () => {
       ).toErrorDev([
         'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
           'Do not read the value directly.',
-        'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-          'Do not read the value directly.',
       ]);
     });
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 730a69c422a2..b8b0050de7a5 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -57,7 +57,6 @@ import {
   DOCUMENT_FRAGMENT_NODE,
 } from '../shared/HTMLNodeType';
 import dangerousStyleValue from '../shared/dangerousStyleValue';
-import getComponentName from 'shared/getComponentName';
 
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
@@ -75,7 +74,6 @@ import {
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
-import {getIsRendering} from 'react-reconciler/src/ReactCurrentFiber';
 import {
   RESPONDER_EVENT_SYSTEM,
   IS_PASSIVE,
@@ -167,12 +165,8 @@ type SelectionInformation = {|
 |};
 
 let SUPPRESS_HYDRATION_WARNING;
-let didWarnAboutUseOpaqueIdentifier;
-let isUpdatingOpaqueValueInRenderPhase;
 if (__DEV__) {
   SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
-  didWarnAboutUseOpaqueIdentifier = {};
-  isUpdatingOpaqueValueInRenderPhase = false;
 }
 
 const SUSPENSE_START_DATA = '$';
@@ -1163,26 +1157,21 @@ export function getInstanceFromNode(node: HTMLElement): null | Object {
 
 let clientId: number = 0;
 export function makeClientId(): OpaqueIDType {
+  return 'r:' + (clientId++).toString(36);
+}
+
+export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
   const id = 'r:' + (clientId++).toString(36);
-  if (__DEV__) {
-    const warnOnAccess = () => {
-      // TODO: Should warn in effects and callbacks, too
-      if (getIsRendering()) {
-        console.error(
-          'The object passed back from useOpaqueIdentifier is meant to be ' +
-            'passed through to attributes only. Do not read the ' +
-            'value directly.',
-        );
-      }
+  return {
+    toString() {
+      warnOnAccessInDEV();
       return id;
-    };
-    return {
-      toString: warnOnAccess,
-      valueOf: warnOnAccess,
-    };
-  } else {
-    return id;
-  }
+    },
+    valueOf() {
+      warnOnAccessInDEV();
+      return id;
+    },
+  };
 }
 
 let serverId: number = 0;
@@ -1190,16 +1179,6 @@ export function makeServerId(): OpaqueIDType {
   return 'R:' + (serverId++).toString(36);
 }
 
-export function getIsUpdatingOpaqueValueInRenderPhase() {
-  if (__DEV__) {
-    return isUpdatingOpaqueValueInRenderPhase;
-  }
-}
-
-function setIsUpdatingOpaqueValueInRenderPhase(isUpdating: boolean) {
-  isUpdatingOpaqueValueInRenderPhase = isUpdating;
-}
-
 export function isOpaqueHydratingObject(value: mixed): boolean {
   return (
     value !== null &&
@@ -1209,51 +1188,12 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
 }
 
 export function makeOpaqueHydratingObject(
-  setId: () => void,
-  fiberType: mixed,
+  attemptToReadValue: () => void,
 ): OpaqueIDType {
   return {
     $$typeof: REACT_OPAQUE_ID_TYPE,
-    toString() {
-      if (__DEV__) {
-        const name = getComponentName(fiberType) || 'Unknown';
-        if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
-          console.error(
-            'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
-              'to attributes only. Do not read the value directly.',
-          );
-          didWarnAboutUseOpaqueIdentifier[name] = true;
-        }
-      }
-
-      setIsUpdatingOpaqueValueInRenderPhase(true);
-      setId();
-      setIsUpdatingOpaqueValueInRenderPhase(false);
-      throw new Error(
-        'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
-          'to attributes only. Do not read the value directly.',
-      );
-    },
-    valueOf() {
-      if (__DEV__) {
-        const name = getComponentName(fiberType) || 'Unknown';
-        if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
-          console.error(
-            'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
-              'to attributes only. Do not read the value directly.',
-          );
-          didWarnAboutUseOpaqueIdentifier[name] = true;
-        }
-      }
-
-      setIsUpdatingOpaqueValueInRenderPhase(true);
-      setId();
-      setIsUpdatingOpaqueValueInRenderPhase(false);
-      throw new Error(
-        'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
-          'to attributes only. Do not read the value directly.',
-      );
-    },
+    toString: attemptToReadValue,
+    valueOf: attemptToReadValue,
   };
 }
 
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index e3b137dbbf75..91aa98398114 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -492,17 +492,16 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
 }
 
 export function makeOpaqueHydratingObject(
-  setId: () => void,
-  fiberType: mixed,
+  attemptToReadValue: () => void,
 ): OpaqueIDType {
   throw new Error('Not yet implemented.');
 }
 
-export function getIsUpdatingOpaqueValueInRenderPhase() {
-  // noop
+export function makeClientId(): OpaqueIDType {
+  throw new Error('Not yet implemented');
 }
 
-export function makeClientId(): OpaqueIDType {
+export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
   throw new Error('Not yet implemented');
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index deb3a6dfeffe..a6ed4de72c39 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -541,17 +541,16 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
 }
 
 export function makeOpaqueHydratingObject(
-  setId: () => void,
-  fiberType: mixed,
+  attemptToReadValue: () => void,
 ): OpaqueIDType {
   throw new Error('Not yet implemented.');
 }
 
-export function getIsUpdatingOpaqueValueInRenderPhase() {
-  // noop
+export function makeClientId(): OpaqueIDType {
+  throw new Error('Not yet implemented');
 }
 
-export function makeClientId(): OpaqueIDType {
+export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
   throw new Error('Not yet implemented');
 }
 
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 5677ea4903c0..546edf2ae1a4 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -439,10 +439,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     beforeRemoveInstance(instance: any): void {
       // NO-OP
     },
-
-    getIsUpdatingOpaqueValueInRenderPhase() {
-      return false;
-    },
   };
 
   const hostConfig = useMutation
diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index 70f8e62b3aa9..81514012002e 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -77,7 +77,11 @@ import {
   getCurrentPriorityLevel,
 } from './SchedulerWithReactIntegration';
 import {getIsHydrating} from './ReactFiberHydrationContext';
-import {makeClientId, makeOpaqueHydratingObject} from './ReactFiberHostConfig';
+import {
+  makeClientId,
+  makeClientIdInDEV,
+  makeOpaqueHydratingObject,
+} from './ReactFiberHostConfig';
 import {
   getLastPendingExpirationTime,
   getWorkInProgressVersion,
@@ -87,6 +91,7 @@ import {
   warnAboutMultipleRenderersDEV,
 } from './ReactMutableSource';
 import {getRootHostContainer} from './ReactFiberHostContext';
+import {getIsRendering} from './ReactCurrentFiber';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -139,11 +144,6 @@ export type Dispatcher = {|
   useOpaqueIdentifier(): OpaqueIDType | void,
 |};
 
-export type IdObject = {
-  $$typeof: Symbol | number,
-  _setId: () => void,
-};
-
 type Update<S, A> = {|
   expirationTime: ExpirationTime,
   suspenseConfig: null | SuspenseConfig,
@@ -180,7 +180,9 @@ export type HookType =
   | 'useOpaqueIdentifier';
 
 let didWarnAboutMismatchedHooksForComponent;
+let didWarnAboutUseOpaqueIdentifier;
 if (__DEV__) {
+  didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
@@ -575,6 +577,8 @@ export function resetHooksAfterThrow(): void {
     hookTypesUpdateIndexDev = -1;
 
     currentHookNameInDev = null;
+
+    isUpdatingOpaqueValueInRenderPhase = false;
   }
 
   didScheduleRenderPhaseUpdate = false;
@@ -1580,18 +1584,61 @@ function rerenderTransition(
   return [start, isPending];
 }
 
+let isUpdatingOpaqueValueInRenderPhase = false;
+export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
+  if (__DEV__) {
+    return isUpdatingOpaqueValueInRenderPhase;
+  }
+}
+
+function warnOnOpaqueIdentifierAccessInDEV(fiber) {
+  if (__DEV__) {
+    // TODO: Should warn in effects and callbacks, too
+    const name = getComponentName(fiber.type) || 'Unknown';
+    if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
+      console.error(
+        'The object passed back from useOpaqueIdentifier is meant to be ' +
+          'passed through to attributes only. Do not read the ' +
+          'value directly.',
+      );
+      didWarnAboutUseOpaqueIdentifier[name] = true;
+    }
+  }
+}
+
 function mountOpaqueIdentifier(): OpaqueIDType | void {
+  const makeId = __DEV__
+    ? makeClientIdInDEV.bind(
+        null,
+        warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber),
+      )
+    : makeClientId;
+
   if (getIsHydrating()) {
     let didUpgrade = false;
-    const id = makeOpaqueHydratingObject(() => {
+    const fiber = currentlyRenderingFiber;
+    const readValue = () => {
       if (!didUpgrade) {
         // Only upgrade once. This works even inside the render phase because
         // the update is added to a shared queue, which outlasts the
         // in-progress render.
         didUpgrade = true;
-        setId(makeClientId());
+        if (__DEV__) {
+          isUpdatingOpaqueValueInRenderPhase = true;
+          setId(makeId());
+          isUpdatingOpaqueValueInRenderPhase = false;
+          warnOnOpaqueIdentifierAccessInDEV(fiber);
+        } else {
+          setId(makeId());
+        }
       }
-    }, currentlyRenderingFiber.type);
+      invariant(
+        false,
+        'The object passed back from useOpaqueIdentifier is meant to be ' +
+          'passed through to attributes only. Do not read the value directly.',
+      );
+    };
+    const id = makeOpaqueHydratingObject(readValue);
 
     const setId = mountState(id)[1];
 
@@ -1600,7 +1647,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
       pushEffect(
         HookHasEffect | HookPassive,
         () => {
-          setId(makeClientId());
+          setId(makeId());
         },
         undefined,
         null,
@@ -1608,7 +1655,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     }
     return id;
   } else {
-    const id = makeClientId();
+    const id = makeId();
     mountState(id);
     return id;
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index 0a95b15e9916..b82ed04cf75c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -63,7 +63,6 @@ import {
   cancelTimeout,
   noTimeout,
   warnsIfNotActing,
-  getIsUpdatingOpaqueValueInRenderPhase,
 } from './ReactFiberHostConfig';
 
 import {createWorkInProgress, assignFiberPropertiesInDEV} from './ReactFiber';
@@ -146,7 +145,11 @@ import {
 } from './ReactFiberCommitWork';
 import {enqueueUpdate} from './ReactUpdateQueue';
 import {resetContextDependencies} from './ReactFiberNewContext';
-import {resetHooksAfterThrow, ContextOnlyDispatcher} from './ReactFiberHooks';
+import {
+  resetHooksAfterThrow,
+  ContextOnlyDispatcher,
+  getIsUpdatingOpaqueValueInRenderPhaseInDEV,
+} from './ReactFiberHooks';
 import {createCapturedValue} from './ReactCapturedValue';
 
 import {
@@ -2844,7 +2847,7 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
     if (
       ReactCurrentDebugFiberIsRenderingInDEV &&
       (executionContext & RenderContext) !== NoContext &&
-      !getIsUpdatingOpaqueValueInRenderPhase()
+      !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
     ) {
       switch (fiber.tag) {
         case FunctionComponent:
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 78f520fbe27d..a9f6286e3bd8 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -86,9 +86,8 @@ export const validateEventListenerTarget =
 export const isOpaqueHydratingObject = $$$hostConfig.isOpaqueHydratingObject;
 export const makeOpaqueHydratingObject =
   $$$hostConfig.makeOpaqueHydratingObject;
-export const getIsUpdatingOpaqueValueInRenderPhase =
-  $$$hostConfig.getIsUpdatingOpaqueValueInRenderPhase;
 export const makeClientId = $$$hostConfig.makeClientId;
+export const makeClientIdInDEV = $$$hostConfig.makeClientIdInDEV;
 export const makeServerId = $$$hostConfig.makeServerId;
 
 // -------------------
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 120ccb5b2217..c3eda48d2a4e 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -48,8 +48,8 @@ export type EventResponder = any;
 export opaque type OpaqueIDType =
   | string
   | {
-      $$typeof: Symbol | number,
-      _setId(): void,
+      toString: () => string | void,
+      valueOf: () => string | void,
     };
 
 export type ReactListenerEvent = Object;
@@ -393,6 +393,20 @@ export function makeClientId(): OpaqueIDType {
   return 'c_' + (clientId++).toString(36);
 }
 
+export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
+  const id = 'c_' + (clientId++).toString(36);
+  return {
+    toString() {
+      warnOnAccessInDEV();
+      return id;
+    },
+    valueOf() {
+      warnOnAccessInDEV();
+      return id;
+    },
+  };
+}
+
 let serverId: number = 0;
 export function makeServerId(): OpaqueIDType {
   return 's_' + (serverId++).toString(36);
@@ -407,48 +421,15 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
 }
 
 export function makeOpaqueHydratingObject(
-  setId: () => void,
-  fiberType: mixed,
+  attemptToReadValue: () => void,
 ): OpaqueIDType {
   return {
     $$typeof: REACT_OPAQUE_ID_TYPE,
-    _setId: setId,
-    toString() {
-      setIsUpdatingOpaqueValueInRenderPhase(true);
-      setId();
-      setIsUpdatingOpaqueValueInRenderPhase(false);
-      throw new Error(
-        'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
-          'to attributes only. Do not read the value directly.',
-      );
-    },
-    valueOf() {
-      setIsUpdatingOpaqueValueInRenderPhase(true);
-      setId();
-      setIsUpdatingOpaqueValueInRenderPhase(false);
-      throw new Error(
-        'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
-          'to attributes only. Do not read the value directly.',
-      );
-    },
+    toString: attemptToReadValue,
+    valueOf: attemptToReadValue,
   };
 }
 
-let isUpdatingOpaqueValueInRenderPhase;
-if (__DEV__) {
-  isUpdatingOpaqueValueInRenderPhase = false;
-}
-
-export function getIsUpdatingOpaqueValueInRenderPhase() {
-  if (__DEV__) {
-    return isUpdatingOpaqueValueInRenderPhase;
-  }
-}
-
-function setIsUpdatingOpaqueValueInRenderPhase(isUpdating) {
-  isUpdatingOpaqueValueInRenderPhase = isUpdating;
-}
-
 export function registerEvent(event: any, rootContainerInstance: Container) {
   throw new Error('Not yet implemented.');
 }

From 815042f183aeec629f7dbf83120b05570d85b8fb Mon Sep 17 00:00:00 2001
From: Luna Ruan <luna@fb.com>
Date: Mon, 6 Apr 2020 16:33:29 -0700
Subject: [PATCH 7/7] changed export name to unstable_useOpaqueIdentifier

---
 .../ReactHooksInspectionIntegration-test.js   |   4 +-
 ...DOMServerIntegrationHooks-test.internal.js | 156 +++++++++---------
 packages/react/index.classic.fb.js            |   2 +-
 packages/react/index.experimental.js          |   2 +-
 packages/react/index.js                       |   2 +-
 packages/react/index.modern.fb.js             |   2 +-
 packages/react/src/React.js                   |   2 +-
 7 files changed, 85 insertions(+), 85 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 9f79be984c8d..cca7a71dd603 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -425,7 +425,7 @@ describe('ReactHooksInspectionIntegration', () => {
 
     it('should support composite useOpaqueIdentifier hook', () => {
       function Foo(props) {
-        const id = React.useOpaqueIdentifier();
+        const id = React.unstable_useOpaqueIdentifier();
         const [state] = React.useState(() => 'hello', []);
         return <div id={id}>{state}</div>;
       }
@@ -452,7 +452,7 @@ describe('ReactHooksInspectionIntegration', () => {
 
     it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
       function Foo(props) {
-        const id = React.useOpaqueIdentifier();
+        const id = React.unstable_useOpaqueIdentifier();
         const [state] = React.useState(() => 'hello', []);
         return <div id={id}>{state}</div>;
       }
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
index 47d2e7e1e3a3..06fca95894ae 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
@@ -57,7 +57,7 @@ function initModules() {
   useDebugValue = React.useDebugValue;
   useImperativeHandle = React.useImperativeHandle;
   useLayoutEffect = React.useLayoutEffect;
-  useOpaqueIdentifier = React.useOpaqueIdentifier;
+  useOpaqueIdentifier = React.unstable_useOpaqueIdentifier;
   forwardRef = React.forwardRef;
 
   yieldedValues = [];
@@ -1645,99 +1645,99 @@ describe('ReactDOMServerHooks', () => {
             'Do not read the value directly.',
         ]);
       });
-    });
 
-    it('useOpaqueIdentifier throws if you try to add the result as a number in a child component wrapped in a Suspense', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={+appId} />;
-      }
-      function App() {
-        const [show] = useState(false);
-        const id = useOpaqueIdentifier();
-        return (
-          <React.Suspense fallback={null}>
-            {show && <div id={id} />}
-            <Child appId={id} />
-          </React.Suspense>
-        );
-      }
+      it('useOpaqueIdentifier throws if you try to add the result as a number in a child component wrapped in a Suspense', async () => {
+        function Child({appId}) {
+          return <div aria-labelledby={+appId} />;
+        }
+        function App() {
+          const [show] = useState(false);
+          const id = useOpaqueIdentifier();
+          return (
+            <React.Suspense fallback={null}>
+              {show && <div id={id} />}
+              <Child appId={id} />
+            </React.Suspense>
+          );
+        }
 
-      const container = document.createElement('div');
-      document.body.appendChild(container);
+        const container = document.createElement('div');
+        document.body.appendChild(container);
 
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
 
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+        ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
 
-      expect(() =>
-        expect(() => Scheduler.unstable_flushAll()).toThrow(
+        expect(() =>
+          expect(() => Scheduler.unstable_flushAll()).toThrow(
+            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
+              'Do not read the value directly.',
+          ),
+        ).toErrorDev([
           'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
             'Do not read the value directly.',
-        ),
-      ).toErrorDev([
-        'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-          'Do not read the value directly.',
-      ]);
-    });
+        ]);
+      });
 
-    it('useOpaqueIdentifier with two opaque identifiers on the same page', () => {
-      let _setShow;
+      it('useOpaqueIdentifier with two opaque identifiers on the same page', () => {
+        let _setShow;
 
-      function App() {
-        const id1 = useOpaqueIdentifier();
-        const id2 = useOpaqueIdentifier();
-        const [show, setShow] = useState(true);
-        _setShow = setShow;
+        function App() {
+          const id1 = useOpaqueIdentifier();
+          const id2 = useOpaqueIdentifier();
+          const [show, setShow] = useState(true);
+          _setShow = setShow;
 
-        return (
-          <div>
-            <React.Suspense fallback={null}>
-              {show ? (
-                <span id={id1}>{'Child'}</span>
-              ) : (
-                <span id={id2}>{'Child'}</span>
-              )}
-            </React.Suspense>
-            <span aria-labelledby={id1}>{'test'}</span>
-          </div>
-        );
-      }
+          return (
+            <div>
+              <React.Suspense fallback={null}>
+                {show ? (
+                  <span id={id1}>{'Child'}</span>
+                ) : (
+                  <span id={id2}>{'Child'}</span>
+                )}
+              </React.Suspense>
+              <span aria-labelledby={id1}>{'test'}</span>
+            </div>
+          );
+        }
 
-      const container = document.createElement('div');
-      document.body.appendChild(container);
+        const container = document.createElement('div');
+        document.body.appendChild(container);
 
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
+        container.innerHTML = ReactDOMServer.renderToString(<App />);
 
-      const serverID = container
-        .getElementsByTagName('span')[0]
-        .getAttribute('id');
-      expect(serverID).not.toBeNull();
-      expect(
-        container
-          .getElementsByTagName('span')[1]
-          .getAttribute('aria-labelledby'),
-      ).toEqual(serverID);
+        const serverID = container
+          .getElementsByTagName('span')[0]
+          .getAttribute('id');
+        expect(serverID).not.toBeNull();
+        expect(
+          container
+            .getElementsByTagName('span')[1]
+            .getAttribute('aria-labelledby'),
+        ).toEqual(serverID);
 
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      jest.runAllTimers();
-      expect(Scheduler).toHaveYielded([]);
-      expect(Scheduler).toFlushAndYield([]);
+        ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
+        jest.runAllTimers();
+        expect(Scheduler).toHaveYielded([]);
+        expect(Scheduler).toFlushAndYield([]);
 
-      ReactTestUtils.act(() => {
-        _setShow(false);
-      });
+        ReactTestUtils.act(() => {
+          _setShow(false);
+        });
 
-      expect(
-        container
-          .getElementsByTagName('span')[1]
-          .getAttribute('aria-labelledby'),
-      ).toEqual(serverID);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toEqual(serverID);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toBeNull();
+        expect(
+          container
+            .getElementsByTagName('span')[1]
+            .getAttribute('aria-labelledby'),
+        ).toEqual(serverID);
+        expect(
+          container.getElementsByTagName('span')[0].getAttribute('id'),
+        ).not.toEqual(serverID);
+        expect(
+          container.getElementsByTagName('span')[0].getAttribute('id'),
+        ).not.toBeNull();
+      });
     });
   }
 });
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index d9eff8a364fa..998de2bec5ca 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -50,6 +50,6 @@ export {
   DEPRECATED_createResponder,
   // enableScopeAPI
   unstable_createScope,
-  useOpaqueIdentifier,
+  unstable_useOpaqueIdentifier,
 } from './src/React';
 export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 71823b6d7d33..9c2a3d4d9355 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -45,5 +45,5 @@ export {
   unstable_withSuspenseConfig,
   // enableBlocksAPI
   block,
-  useOpaqueIdentifier,
+  unstable_useOpaqueIdentifier,
 } from './src/React';
diff --git a/packages/react/index.js b/packages/react/index.js
index f397624087fd..3ca22840f999 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -72,9 +72,9 @@ export {
   SuspenseList,
   unstable_withSuspenseConfig,
   block,
-  useOpaqueIdentifier,
   DEPRECATED_useResponder,
   DEPRECATED_createResponder,
   unstable_createFundamental,
   unstable_createScope,
+  unstable_useOpaqueIdentifier,
 } from './src/React';
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 873bb411a8c5..76a904d0c8cf 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -49,6 +49,6 @@ export {
   DEPRECATED_createResponder,
   // enableScopeAPI
   unstable_createScope,
-  useOpaqueIdentifier,
+  unstable_useOpaqueIdentifier,
 } from './src/React';
 export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 79938ec51f79..d7896ad29972 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -118,5 +118,5 @@ export {
   createFundamental as unstable_createFundamental,
   // enableScopeAPI
   createScope as unstable_createScope,
-  useOpaqueIdentifier,
+  useOpaqueIdentifier as unstable_useOpaqueIdentifier,
 };