Skip to content

Commit 3f5cde5

Browse files
author
Brian Vaughn
committed
Don't bypass useContext to go straight to readContext anymore
This adds a small amount of overhead, so I'm not sure if it will fly. I think it might be necessary though in order to support the react-debug-tools package.
1 parent e777462 commit 3f5cde5

File tree

3 files changed

+32
-30
lines changed

3 files changed

+32
-30
lines changed

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,7 @@ function useContext<T>(
9393
context: ReactContext<T>,
9494
observedBits: void | number | boolean,
9595
): T {
96-
if (__DEV__) {
97-
// ReactFiberHooks only adds context to the hooks list in DEV.
98-
nextHook();
99-
}
96+
nextHook();
10097
hookLog.push({
10198
primitive: 'Context',
10299
stackError: new Error(),

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

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -431,27 +431,38 @@ describe('ReactHooksInspectionIntegration', () => {
431431
// This test case is based on an open source bug report:
432432
// facebookincubator/redux-react-hook/issues/34#issuecomment-466693787
433433
it('should properly advance the current hook for useContext', () => {
434-
const MyContext = React.createContext(123);
435-
436-
let hasInitializedState = false;
437-
const initializeStateOnce = () => {
438-
if (hasInitializedState) {
439-
throw Error(
440-
'State initialization function should only be called once.',
441-
);
442-
}
443-
hasInitializedState = true;
444-
return {foo: 'abc'};
445-
};
434+
const MyContext = React.createContext(1);
435+
436+
let incrementCount;
446437

447438
function Foo(props) {
448-
React.useContext(MyContext);
449-
const [data] = React.useState(initializeStateOnce);
450-
return <div>foo: {data.foo}</div>;
439+
const context = React.useContext(MyContext);
440+
const [data, setData] = React.useState({count: context});
441+
442+
incrementCount = () => setData(({count}) => ({count: count + 1}));
443+
444+
return <div>count: {data.count}</div>;
451445
}
452446

453447
const renderer = ReactTestRenderer.create(<Foo />);
448+
expect(renderer.toJSON()).toEqual({
449+
type: 'div',
450+
props: {},
451+
children: ['count: ', '1'],
452+
});
453+
454+
act(incrementCount);
455+
expect(renderer.toJSON()).toEqual({
456+
type: 'div',
457+
props: {},
458+
children: ['count: ', '2'],
459+
});
460+
454461
const childFiber = renderer.root._currentFiber();
455-
ReactDebugTools.inspectHooksOfFiber(childFiber);
462+
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
463+
expect(tree).toEqual([
464+
{name: 'Context', value: 1, subHooks: []},
465+
{name: 'State', value: {count: 2}, subHooks: []},
466+
]);
456467
});
457468
});

packages/react-reconciler/src/ReactFiberHooks.js

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -524,21 +524,15 @@ function mountContext<T>(
524524
context: ReactContext<T>,
525525
observedBits: void | number | boolean,
526526
): T {
527-
if (__DEV__) {
528-
// If this DEV conditional is ever removed, update ReactDebugHooks useContext too.
529-
mountWorkInProgressHook();
530-
}
527+
mountWorkInProgressHook();
531528
return readContext(context, observedBits);
532529
}
533530

534531
function updateContext<T>(
535532
context: ReactContext<T>,
536533
observedBits: void | number | boolean,
537534
): T {
538-
if (__DEV__) {
539-
// If this DEV conditional is ever removed, update ReactDebugHooks useContext too.
540-
updateWorkInProgressHook();
541-
}
535+
updateWorkInProgressHook();
542536
return readContext(context, observedBits);
543537
}
544538

@@ -1156,7 +1150,7 @@ const HooksDispatcherOnMount: Dispatcher = {
11561150
readContext,
11571151

11581152
useCallback: mountCallback,
1159-
useContext: readContext,
1153+
useContext: mountContext,
11601154
useEffect: mountEffect,
11611155
useImperativeHandle: mountImperativeHandle,
11621156
useLayoutEffect: mountLayoutEffect,
@@ -1171,7 +1165,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
11711165
readContext,
11721166

11731167
useCallback: updateCallback,
1174-
useContext: readContext,
1168+
useContext: updateContext,
11751169
useEffect: updateEffect,
11761170
useImperativeHandle: updateImperativeHandle,
11771171
useLayoutEffect: updateLayoutEffect,

0 commit comments

Comments
 (0)