Skip to content

Commit ce0f030

Browse files
author
Brian Vaughn
committed
react-debug-tools accepts currentDispatcher ref as param
1 parent ab03e3d commit ce0f030

File tree

3 files changed

+66
-25
lines changed

3 files changed

+66
-25
lines changed

‎packages/react-debug-tools/src/ReactDebugHooks.js

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
ForwardRef,
2121
} from 'shared/ReactWorkTags';
2222

23-
const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
23+
type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
2424

2525
// Used to track hooks called during a render
2626

@@ -406,20 +406,21 @@ function buildTree(rootStack, readHookLog): HooksTree {
406406
}
407407

408408
export function inspectHooks<Props>(
409+
currentDispatcher: CurrentDispatcherRef,
409410
renderFunction: Props => React$Node,
410411
props: Props,
411412
): HooksTree {
412-
let previousDispatcher = ReactCurrentDispatcher.current;
413+
let previousDispatcher = currentDispatcher.current;
413414
let readHookLog;
414-
ReactCurrentDispatcher.current = Dispatcher;
415+
currentDispatcher.current = Dispatcher;
415416
let ancestorStackError;
416417
try {
417418
ancestorStackError = new Error();
418419
renderFunction(props);
419420
} finally {
420421
readHookLog = hookLog;
421422
hookLog = [];
422-
ReactCurrentDispatcher.current = previousDispatcher;
423+
currentDispatcher.current = previousDispatcher;
423424
}
424425
let rootStack = ErrorStackParser.parse(ancestorStackError);
425426
return buildTree(rootStack, readHookLog);
@@ -447,21 +448,22 @@ function restoreContexts(contextMap: Map<ReactContext<any>, any>) {
447448
}
448449

449450
function inspectHooksOfForwardRef<Props, Ref>(
451+
currentDispatcher: CurrentDispatcherRef,
450452
renderFunction: (Props, Ref) => React$Node,
451453
props: Props,
452454
ref: Ref,
453455
): HooksTree {
454-
let previousDispatcher = ReactCurrentDispatcher.current;
456+
let previousDispatcher = currentDispatcher.current;
455457
let readHookLog;
456-
ReactCurrentDispatcher.current = Dispatcher;
458+
currentDispatcher.current = Dispatcher;
457459
let ancestorStackError;
458460
try {
459461
ancestorStackError = new Error();
460462
renderFunction(props, ref);
461463
} finally {
462464
readHookLog = hookLog;
463465
hookLog = [];
464-
ReactCurrentDispatcher.current = previousDispatcher;
466+
currentDispatcher.current = previousDispatcher;
465467
}
466468
let rootStack = ErrorStackParser.parse(ancestorStackError);
467469
return buildTree(rootStack, readHookLog);
@@ -482,7 +484,10 @@ function resolveDefaultProps(Component, baseProps) {
482484
return baseProps;
483485
}
484486

485-
export function inspectHooksOfFiber(fiber: Fiber) {
487+
export function inspectHooksOfFiber(
488+
currentDispatcher: CurrentDispatcherRef,
489+
fiber: Fiber,
490+
) {
486491
if (
487492
fiber.tag !== FunctionComponent &&
488493
fiber.tag !== SimpleMemoComponent &&
@@ -506,9 +511,14 @@ export function inspectHooksOfFiber(fiber: Fiber) {
506511
try {
507512
setupContexts(contextMap, fiber);
508513
if (fiber.tag === ForwardRef) {
509-
return inspectHooksOfForwardRef(type.render, props, fiber.ref);
514+
return inspectHooksOfForwardRef(
515+
currentDispatcher,
516+
type.render,
517+
props,
518+
fiber.ref,
519+
);
510520
}
511-
return inspectHooks(type, props);
521+
return inspectHooks(currentDispatcher, type, props);
512522
} finally {
513523
currentHook = null;
514524
restoreContexts(contextMap);

‎packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
let React;
1414
let ReactDebugTools;
15+
let currentDispatcher;
1516

1617
describe('ReactHooksInspection', () => {
1718
beforeEach(() => {
@@ -21,14 +22,18 @@ describe('ReactHooksInspection', () => {
2122
ReactFeatureFlags.enableHooks = true;
2223
React = require('react');
2324
ReactDebugTools = require('react-debug-tools');
25+
26+
currentDispatcher =
27+
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
28+
.ReactCurrentDispatcher;
2429
});
2530

2631
it('should inspect a simple useState hook', () => {
2732
function Foo(props) {
2833
let [state] = React.useState('hello world');
2934
return <div>{state}</div>;
3035
}
31-
let tree = ReactDebugTools.inspectHooks(Foo, {});
36+
let tree = ReactDebugTools.inspectHooks(currentDispatcher, Foo, {});
3237
expect(tree).toEqual([
3338
{
3439
name: 'State',
@@ -47,7 +52,7 @@ describe('ReactHooksInspection', () => {
4752
let value = useCustom('hello world');
4853
return <div>{value}</div>;
4954
}
50-
let tree = ReactDebugTools.inspectHooks(Foo, {});
55+
let tree = ReactDebugTools.inspectHooks(currentDispatcher, Foo, {});
5156
expect(tree).toEqual([
5257
{
5358
name: 'Custom',
@@ -79,7 +84,7 @@ describe('ReactHooksInspection', () => {
7984
</div>
8085
);
8186
}
82-
let tree = ReactDebugTools.inspectHooks(Foo, {});
87+
let tree = ReactDebugTools.inspectHooks(currentDispatcher, Foo, {});
8388
expect(tree).toEqual([
8489
{
8590
name: 'Custom',
@@ -142,7 +147,7 @@ describe('ReactHooksInspection', () => {
142147
</div>
143148
);
144149
}
145-
let tree = ReactDebugTools.inspectHooks(Foo, {});
150+
let tree = ReactDebugTools.inspectHooks(currentDispatcher, Foo, {});
146151
expect(tree).toEqual([
147152
{
148153
name: 'Bar',
@@ -207,7 +212,7 @@ describe('ReactHooksInspection', () => {
207212
let value = React.useContext(MyContext);
208213
return <div>{value}</div>;
209214
}
210-
let tree = ReactDebugTools.inspectHooks(Foo, {});
215+
let tree = ReactDebugTools.inspectHooks(currentDispatcher, Foo, {});
211216
expect(tree).toEqual([
212217
{
213218
name: 'Context',

‎packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.internal.js

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
let React;
1414
let ReactTestRenderer;
1515
let ReactDebugTools;
16+
let currentDispatcher;
1617

1718
describe('ReactHooksInspectionIntergration', () => {
1819
beforeEach(() => {
@@ -23,6 +24,10 @@ describe('ReactHooksInspectionIntergration', () => {
2324
React = require('react');
2425
ReactTestRenderer = require('react-test-renderer');
2526
ReactDebugTools = require('react-debug-tools');
27+
28+
currentDispatcher =
29+
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
30+
.ReactCurrentDispatcher;
2631
});
2732

2833
it('should inspect the current state of useState hooks', () => {
@@ -39,7 +44,10 @@ describe('ReactHooksInspectionIntergration', () => {
3944
let renderer = ReactTestRenderer.create(<Foo prop="prop" />);
4045

4146
let childFiber = renderer.root.findByType(Foo)._currentFiber();
42-
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
47+
let tree = ReactDebugTools.inspectHooksOfFiber(
48+
currentDispatcher,
49+
childFiber,
50+
);
4351
expect(tree).toEqual([
4452
{name: 'State', value: 'hello', subHooks: []},
4553
{name: 'State', value: 'world', subHooks: []},
@@ -53,7 +61,7 @@ describe('ReactHooksInspectionIntergration', () => {
5361
setStateA('Hi');
5462

5563
childFiber = renderer.root.findByType(Foo)._currentFiber();
56-
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
64+
tree = ReactDebugTools.inspectHooksOfFiber(currentDispatcher, childFiber);
5765

5866
expect(tree).toEqual([
5967
{name: 'State', value: 'Hi', subHooks: []},
@@ -63,7 +71,7 @@ describe('ReactHooksInspectionIntergration', () => {
6371
setStateB('world!');
6472

6573
childFiber = renderer.root.findByType(Foo)._currentFiber();
66-
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
74+
tree = ReactDebugTools.inspectHooksOfFiber(currentDispatcher, childFiber);
6775

6876
expect(tree).toEqual([
6977
{name: 'State', value: 'Hi', subHooks: []},
@@ -111,7 +119,10 @@ describe('ReactHooksInspectionIntergration', () => {
111119

112120
let {onClick: updateStates} = renderer.root.findByType('div').props;
113121

114-
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
122+
let tree = ReactDebugTools.inspectHooksOfFiber(
123+
currentDispatcher,
124+
childFiber,
125+
);
115126
expect(tree).toEqual([
116127
{name: 'State', value: 'a', subHooks: []},
117128
{name: 'Reducer', value: 'b', subHooks: []},
@@ -126,7 +137,7 @@ describe('ReactHooksInspectionIntergration', () => {
126137
updateStates();
127138

128139
childFiber = renderer.root.findByType(Foo)._currentFiber();
129-
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
140+
tree = ReactDebugTools.inspectHooksOfFiber(currentDispatcher, childFiber);
130141

131142
expect(tree).toEqual([
132143
{name: 'State', value: 'A', subHooks: []},
@@ -152,7 +163,10 @@ describe('ReactHooksInspectionIntergration', () => {
152163
</MyContext.Provider>,
153164
);
154165
let childFiber = renderer.root.findByType(Foo)._currentFiber();
155-
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
166+
let tree = ReactDebugTools.inspectHooksOfFiber(
167+
currentDispatcher,
168+
childFiber,
169+
);
156170
expect(tree).toEqual([
157171
{
158172
name: 'Context',
@@ -172,7 +186,10 @@ describe('ReactHooksInspectionIntergration', () => {
172186
let renderer = ReactTestRenderer.create(<Foo ref={ref} />);
173187

174188
let childFiber = renderer.root.findByType(Foo)._currentFiber();
175-
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
189+
let tree = ReactDebugTools.inspectHooksOfFiber(
190+
currentDispatcher,
191+
childFiber,
192+
);
176193
expect(tree).toEqual([
177194
{name: 'ImperativeMethods', value: obj, subHooks: []},
178195
]);
@@ -187,7 +204,10 @@ describe('ReactHooksInspectionIntergration', () => {
187204
let renderer = ReactTestRenderer.create(<Foo />);
188205
// TODO: Test renderer findByType is broken for memo. Have to search for the inner.
189206
let childFiber = renderer.root.findByType(InnerFoo)._currentFiber();
190-
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
207+
let tree = ReactDebugTools.inspectHooksOfFiber(
208+
currentDispatcher,
209+
childFiber,
210+
);
191211
expect(tree).toEqual([{name: 'State', value: 'hello', subHooks: []}]);
192212
});
193213

@@ -202,7 +222,10 @@ describe('ReactHooksInspectionIntergration', () => {
202222
}
203223
let renderer = ReactTestRenderer.create(<Foo />);
204224
let childFiber = renderer.root.findByType(Foo)._currentFiber();
205-
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
225+
let tree = ReactDebugTools.inspectHooksOfFiber(
226+
currentDispatcher,
227+
childFiber,
228+
);
206229
expect(tree).toEqual([
207230
{
208231
name: 'Custom',
@@ -238,7 +261,10 @@ describe('ReactHooksInspectionIntergration', () => {
238261
await LazyFoo;
239262

240263
let childFiber = renderer.root._currentFiber();
241-
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
264+
let tree = ReactDebugTools.inspectHooksOfFiber(
265+
currentDispatcher,
266+
childFiber,
267+
);
242268
expect(tree).toEqual([{name: 'State', value: 'def', subHooks: []}]);
243269
});
244270
});

0 commit comments

Comments
 (0)