Skip to content

Commit

Permalink
Update ReactDebugHooks to handle composite hooks
Browse files Browse the repository at this point in the history
The useState hook has always composed the useReducer hook. 1:1 composition like this is fine.

But some more recent hooks (e.g. useTransition, useDeferredValue) compose multiple hooks internally. This breaks react-debug-tools because it causes off-by-N errors when the debug tools re-renders the function.

For example, if a component were to use the useTransition and useMemo hooks, the normal hooks dispatcher would create a list of first state, then callback, then memo hooks, but the debug tools package would expect a list of transition then memo. This can break user code and cause runtime errors in both the react-debug-tools package and in product code.

This PR fixes the currently broken hooks by updating debug tools to be aware of the composite hooks (how many times it should call nextHook essentially) and adds tests to make sure they don't get out of sync again. We'll need to add similar tests for future composite hooks (like useMutableSource #18000).
  • Loading branch information
Brian Vaughn committed Feb 25, 2020
1 parent 60016c4 commit 76ba30b
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 2 deletions.
12 changes: 10 additions & 2 deletions packages/react-debug-tools/src/ReactDebugHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,11 @@ function useResponder(
function useTransition(
config: SuspenseConfig | null | void,
): [(() => void) => void, boolean] {
nextHook();
// useTransition() composes multiple hooks internally.
// Advance the current hook index the same number of times
// so that subsequent hooks have the right memoized state.
nextHook(); // State
nextHook(); // Callback
hookLog.push({
primitive: 'Transition',
stackError: new Error(),
Expand All @@ -253,7 +257,11 @@ function useTransition(
}

function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
nextHook();
// useDeferredValue() composes multiple hooks internally.
// Advance the current hook index the same number of times
// so that subsequent hooks have the right memoized state.
nextHook(); // State
nextHook(); // Effect
hookLog.push({
primitive: 'DeferredValue',
stackError: new Error(),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,64 @@ describe('ReactHooksInspectionIntegration', () => {
]);
});

if (__EXPERIMENTAL__) {
it('should support composite useTransition hook', () => {
function Foo(props) {
React.useTransition();
const memoizedValue = React.useMemo(() => 'hello', []);
return <div>{memoizedValue}</div>;
}
let renderer = ReactTestRenderer.create(<Foo />);
let childFiber = renderer.root.findByType(Foo)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{
id: 0,
isStateEditable: false,
name: 'Transition',
value: undefined,
subHooks: [],
},
{
id: 1,
isStateEditable: false,
name: 'Memo',
value: 'hello',
subHooks: [],
},
]);
});

it('should support composite useDeferredValue hook', () => {
function Foo(props) {
React.useDeferredValue('abc', {
timeoutMs: 500,
});
const [state] = React.useState(() => 'hello', []);
return <div>{state}</div>;
}
let renderer = ReactTestRenderer.create(<Foo />);
let childFiber = renderer.root.findByType(Foo)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{
id: 0,
isStateEditable: false,
name: 'DeferredValue',
value: 'abc',
subHooks: [],
},
{
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 76ba30b

Please sign in to comment.