From 0e5c2592cfa1d381ba0c85391adfafa505dc65d0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 30 Oct 2021 18:01:11 -0400
Subject: [PATCH] Add useId to react-debug-tools

---
 .../react-debug-tools/src/ReactDebugHooks.js  |  9 ++++++-
 .../ReactHooksInspectionIntegration-test.js   | 27 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index b9268219c2c4d..eed8c46df7d6d 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -342,7 +342,14 @@ function useOpaqueIdentifier(): OpaqueIDType | void {
 }
 
 function useId(): string {
-  throw new Error('Not implemented.');
+  const hook = nextHook();
+  const id = hook !== null ? hook.memoizedState : '';
+  hookLog.push({
+    primitive: 'Id',
+    stackError: new Error(),
+    value: id,
+  });
+  return id;
 }
 
 const Dispatcher: DispatcherType = {
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 6937efd631572..b6deb8d668cf0 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -656,6 +656,33 @@ describe('ReactHooksInspectionIntegration', () => {
     });
   });
 
+  it('should support useOpaqueIdentifier hook', () => {
+    function Foo(props) {
+      const id = React.unstable_useId();
+      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('Id');
+    expect(String(tree[0].value).startsWith('r:')).toBe(true);
+
+    expect(tree[1]).toEqual({
+      id: 1,
+      isStateEditable: true,
+      name: 'State',
+      value: 'hello',
+      subHooks: [],
+    });
+  });
+
   describe('useDebugValue', () => {
     it('should support inspectable values for multiple custom hooks', () => {
       function useLabeledValue(label) {