Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix useId in strict mode #22681

Merged
merged 2 commits into from
Nov 3, 2021
Merged

Fix useId in strict mode #22681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de5f63f
Fix: useId in strict mode
acdlite Nov 2, 2021
23372a5
Add test for render phase updates
acdlite Nov 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMUseId-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ let ReactDOMFizzServer;
let Stream;
let Suspense;
let useId;
let useState;
let document;
let writable;
let container;
Expand All @@ -35,6 +36,7 @@ describe('useId', () => {
Stream = require('stream');
Suspense = React.Suspense;
useId = React.useId;
useState = React.useState;

// Test Environment
const jsdom = new JSDOM(
Expand Down Expand Up @@ -198,6 +200,35 @@ describe('useId', () => {
`);
});

test('StrictMode double rendering', async () => {
const {StrictMode} = React;

function App() {
return (
<StrictMode>
<DivWithId />
</StrictMode>
);
}

await serverAct(async () => {
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
pipe(writable);
});
await clientAct(async () => {
ReactDOM.hydrateRoot(container, <App />);
});
expect(container).toMatchInlineSnapshot(`
<div
id="container"
>
<div
id="0"
/>
</div>
`);
});

test('empty (null) children', async () => {
// We don't treat empty children different from non-empty ones, which means
// they get allocated a slot when generating ids. There's no inherent reason
Expand Down Expand Up @@ -313,6 +344,32 @@ describe('useId', () => {
`);
});

test('local render phase updates', async () => {
function App({swap}) {
const [count, setCount] = useState(0);
if (count < 3) {
setCount(count + 1);
}
return useId();
}

await serverAct(async () => {
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
pipe(writable);
});
await clientAct(async () => {
ReactDOM.hydrateRoot(container, <App />);
});
expect(container).toMatchInlineSnapshot(`
<div
id="container"
>
R:0
<!-- -->
</div>
`);
});

test('basic incremental hydration', async () => {
function App() {
return (
Expand Down
31 changes: 30 additions & 1 deletion packages/react-reconciler/src/ReactFiberBeginWork.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,11 @@ import {
prepareToReadContext,
scheduleWorkOnParentPath,
} from './ReactFiberNewContext.new';
import {renderWithHooks, bailoutHooks} from './ReactFiberHooks.new';
import {
renderWithHooks,
checkDidRenderIdHook,
bailoutHooks,
} from './ReactFiberHooks.new';
import {stopProfilerTimerIfRunning} from './ReactProfilerTimer.new';
import {
getMaskedContext,
Expand Down Expand Up @@ -240,6 +244,7 @@ import {
getForksAtLevel,
isForkedChild,
pushTreeId,
pushMaterializedTreeId,
} from './ReactFiberTreeContext.new';

const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
Expand Down Expand Up @@ -365,6 +370,7 @@ function updateForwardRef(

// The rest is a fork of updateFunctionComponent
let nextChildren;
let hasId;
prepareToReadContext(workInProgress, renderLanes);
if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
Expand All @@ -380,6 +386,7 @@ function updateForwardRef(
ref,
renderLanes,
);
hasId = checkDidRenderIdHook();
if (
debugRenderPhaseSideEffectsForStrictMode &&
workInProgress.mode & StrictLegacyMode
Expand All @@ -394,6 +401,7 @@ function updateForwardRef(
ref,
renderLanes,
);
hasId = checkDidRenderIdHook();
} finally {
setIsStrictModeForDevtools(false);
}
Expand All @@ -408,6 +416,7 @@ function updateForwardRef(
ref,
renderLanes,
);
hasId = checkDidRenderIdHook();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
Expand All @@ -418,6 +427,10 @@ function updateForwardRef(
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

if (getIsHydrating() && hasId) {
pushMaterializedTreeId(workInProgress);
}

// React DevTools reads this flag.
workInProgress.flags |= PerformedWork;
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
Expand Down Expand Up @@ -970,6 +983,7 @@ function updateFunctionComponent(
}

let nextChildren;
let hasId;
prepareToReadContext(workInProgress, renderLanes);
if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
Expand All @@ -985,6 +999,7 @@ function updateFunctionComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
if (
debugRenderPhaseSideEffectsForStrictMode &&
workInProgress.mode & StrictLegacyMode
Expand All @@ -999,6 +1014,7 @@ function updateFunctionComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
} finally {
setIsStrictModeForDevtools(false);
}
Expand All @@ -1013,6 +1029,7 @@ function updateFunctionComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
Expand All @@ -1023,6 +1040,10 @@ function updateFunctionComponent(
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

if (getIsHydrating() && hasId) {
pushMaterializedTreeId(workInProgress);
}

// React DevTools reads this flag.
workInProgress.flags |= PerformedWork;
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
Expand Down Expand Up @@ -1593,6 +1614,7 @@ function mountIndeterminateComponent(

prepareToReadContext(workInProgress, renderLanes);
let value;
let hasId;

if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
Expand Down Expand Up @@ -1629,6 +1651,7 @@ function mountIndeterminateComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
setIsRendering(false);
} else {
value = renderWithHooks(
Expand All @@ -1639,6 +1662,7 @@ function mountIndeterminateComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
Expand Down Expand Up @@ -1758,12 +1782,17 @@ function mountIndeterminateComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
} finally {
setIsStrictModeForDevtools(false);
}
}
}

if (getIsHydrating() && hasId) {
pushMaterializedTreeId(workInProgress);
}

reconcileChildren(null, workInProgress, value, renderLanes);
if (__DEV__) {
validateFunctionComponentInDev(workInProgress, Component);
Expand Down
31 changes: 30 additions & 1 deletion packages/react-reconciler/src/ReactFiberBeginWork.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,11 @@ import {
prepareToReadContext,
scheduleWorkOnParentPath,
} from './ReactFiberNewContext.old';
import {renderWithHooks, bailoutHooks} from './ReactFiberHooks.old';
import {
renderWithHooks,
checkDidRenderIdHook,
bailoutHooks,
} from './ReactFiberHooks.old';
import {stopProfilerTimerIfRunning} from './ReactProfilerTimer.old';
import {
getMaskedContext,
Expand Down Expand Up @@ -240,6 +244,7 @@ import {
getForksAtLevel,
isForkedChild,
pushTreeId,
pushMaterializedTreeId,
} from './ReactFiberTreeContext.old';

const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
Expand Down Expand Up @@ -365,6 +370,7 @@ function updateForwardRef(

// The rest is a fork of updateFunctionComponent
let nextChildren;
let hasId;
prepareToReadContext(workInProgress, renderLanes);
if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
Expand All @@ -380,6 +386,7 @@ function updateForwardRef(
ref,
renderLanes,
);
hasId = checkDidRenderIdHook();
if (
debugRenderPhaseSideEffectsForStrictMode &&
workInProgress.mode & StrictLegacyMode
Expand All @@ -394,6 +401,7 @@ function updateForwardRef(
ref,
renderLanes,
);
hasId = checkDidRenderIdHook();
} finally {
setIsStrictModeForDevtools(false);
}
Expand All @@ -408,6 +416,7 @@ function updateForwardRef(
ref,
renderLanes,
);
hasId = checkDidRenderIdHook();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
Expand All @@ -418,6 +427,10 @@ function updateForwardRef(
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

if (getIsHydrating() && hasId) {
pushMaterializedTreeId(workInProgress);
}

// React DevTools reads this flag.
workInProgress.flags |= PerformedWork;
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
Expand Down Expand Up @@ -970,6 +983,7 @@ function updateFunctionComponent(
}

let nextChildren;
let hasId;
prepareToReadContext(workInProgress, renderLanes);
if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
Expand All @@ -985,6 +999,7 @@ function updateFunctionComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
if (
debugRenderPhaseSideEffectsForStrictMode &&
workInProgress.mode & StrictLegacyMode
Expand All @@ -999,6 +1014,7 @@ function updateFunctionComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
} finally {
setIsStrictModeForDevtools(false);
}
Expand All @@ -1013,6 +1029,7 @@ function updateFunctionComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
Expand All @@ -1023,6 +1040,10 @@ function updateFunctionComponent(
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

if (getIsHydrating() && hasId) {
pushMaterializedTreeId(workInProgress);
}

// React DevTools reads this flag.
workInProgress.flags |= PerformedWork;
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
Expand Down Expand Up @@ -1593,6 +1614,7 @@ function mountIndeterminateComponent(

prepareToReadContext(workInProgress, renderLanes);
let value;
let hasId;

if (enableSchedulingProfiler) {
markComponentRenderStarted(workInProgress);
Expand Down Expand Up @@ -1629,6 +1651,7 @@ function mountIndeterminateComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
setIsRendering(false);
} else {
value = renderWithHooks(
Expand All @@ -1639,6 +1662,7 @@ function mountIndeterminateComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
}
if (enableSchedulingProfiler) {
markComponentRenderStopped();
Expand Down Expand Up @@ -1758,12 +1782,17 @@ function mountIndeterminateComponent(
context,
renderLanes,
);
hasId = checkDidRenderIdHook();
} finally {
setIsStrictModeForDevtools(false);
}
}
}

if (getIsHydrating() && hasId) {
pushMaterializedTreeId(workInProgress);
}

reconcileChildren(null, workInProgress, value, renderLanes);
if (__DEV__) {
validateFunctionComponentInDev(workInProgress, Component);
Expand Down
Loading