Skip to content

Commit

Permalink
Add useId to react-debug-tools
Browse files Browse the repository at this point in the history
  • Loading branch information
acdlite committed Nov 1, 2021
1 parent 20675c5 commit 2a4e9c9
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 2 deletions.
9 changes: 8 additions & 1 deletion packages/react-debug-tools/src/ReactDebugHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -628,7 +628,7 @@ describe('ReactHooksInspectionIntegration', () => {
it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
function Foo(props) {
const id = React.unstable_useOpaqueIdentifier();
const [state] = React.useState(() => 'hello', []);
const [state] = React.useState('hello');
return <div id={id}>{state}</div>;
}

Expand Down Expand Up @@ -656,6 +656,33 @@ describe('ReactHooksInspectionIntegration', () => {
});
});

it('should support useId 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) {
Expand Down

0 comments on commit 2a4e9c9

Please sign in to comment.