OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Resubmit Add HydrationSyncLane (#25711)

Browse Source 
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn debug-test --watch TestName`, open
`chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary
Submit https://github.com/facebook/react/pull/25698 again after fixing
the devtools regression tests in CI.
The PR changed lanes representation and some snapshot tests of devtools
captures lanes. In devtools tests for older versions, the updated lanes
representation no longer matched. The fix is to disable regression tests
for those tests.

## How did you test this change?

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->

```
./scripts/circleci/download_devtools_regression_build.js 18.0 --replaceBuild
node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion 18.0
```

Unrelated to this PR. There was some issue with jest caching when I
locally ran that command. it didn't seem to include the @reactVersion
transform, but if I manually modified `scripts/jest/preprocessor.js` or
ran ` yarn test --clearCache`, the jest test runs correctly.
This commit is contained in:
Tianyu Yao
2022-11-28 09:13:06 -08:00
committed by GitHub
parent 2655c9354d
commit 8a23def32f
8 changed files with 524 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

474
packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js vendored
View File

File diff suppressed because it is too large Load Diff

176
packages/react-devtools-shared/src/__tests__/preprocessData-test.js vendored
View File

@@ -613,7 +613,6 @@ describe('Timeline profiler', () => {
`);
});
// @reactVersion >= 18.0
it('should process a sample legacy render sequence', async () => {
utils.legacyRender(<div />, document.createElement('div'));
@@ -629,7 +628,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.01,
"lanes": "0b0000000000000000000000000000000",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 0.006,
"type": "render-idle",
},
@@ -637,7 +636,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000000",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 0.006,
"type": "render",
},
@@ -645,7 +644,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000000",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 0.008,
"type": "commit",
},
@@ -653,7 +652,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000000",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 0.014,
"type": "layout-effects",
},
@@ -714,12 +713,13 @@ describe('Timeline profiler', () => {
30 => "Offscreen",
},
"laneToReactMeasureMap": Map {
0 => Array [
0 => Array [],
1 => Array [
Object {
"batchUID": 0,
"depth": 0,
"duration": 0.01,
"lanes": "0b0000000000000000000000000000000",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 0.006,
"type": "render-idle",
},
@@ -727,7 +727,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000000",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 0.006,
"type": "render",
},
@@ -735,7 +735,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000000",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 0.008,
"type": "commit",
},
@@ -743,12 +743,11 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000000",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 0.014,
"type": "layout-effects",
},
],
1 => Array [],
2 => Array [],
3 => Array [],
4 => Array [],
@@ -785,7 +784,7 @@ describe('Timeline profiler', () => {
"reactVersion": "<filtered-version>",
"schedulingEvents": Array [
Object {
"lanes": "0b0000000000000000000000000000000",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 0.005,
"type": "schedule-render",
"warning": null,
@@ -800,7 +799,6 @@ describe('Timeline profiler', () => {
`);
});
// @reactVersion >= 18.0
it('should process a sample createRoot render sequence', async () => {
function App() {
const [didMount, setDidMount] = React.useState(false);
@@ -827,7 +825,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.012,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.006,
"type": "render-idle",
},
@@ -835,7 +833,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.006,
"type": "render",
},
@@ -843,7 +841,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.01,
"type": "commit",
},
@@ -851,7 +849,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.016,
"type": "layout-effects",
},
@@ -859,7 +857,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.004,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.019,
"type": "passive-effects",
},
@@ -869,7 +867,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.012,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.024,
"type": "render-idle",
},
@@ -877,7 +875,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.024,
"type": "render",
},
@@ -885,7 +883,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.028,
"type": "commit",
},
@@ -893,7 +891,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.034,
"type": "layout-effects",
},
@@ -901,7 +899,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.037,
"type": "passive-effects",
},
@@ -995,12 +993,13 @@ describe('Timeline profiler', () => {
1 => Array [],
2 => Array [],
3 => Array [],
4 => Array [
4 => Array [],
5 => Array [
Object {
"batchUID": 0,
"depth": 0,
"duration": 0.012,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.006,
"type": "render-idle",
},
@@ -1008,7 +1007,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.006,
"type": "render",
},
@@ -1016,7 +1015,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.01,
"type": "commit",
},
@@ -1024,7 +1023,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.016,
"type": "layout-effects",
},
@@ -1032,7 +1031,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.004,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.019,
"type": "passive-effects",
},
@@ -1040,7 +1039,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.012,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.024,
"type": "render-idle",
},
@@ -1048,7 +1047,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.024,
"type": "render",
},
@@ -1056,7 +1055,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.028,
"type": "commit",
},
@@ -1064,7 +1063,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.034,
"type": "layout-effects",
},
@@ -1072,12 +1071,11 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.037,
"type": "passive-effects",
},
],
5 => Array [],
6 => Array [],
7 => Array [],
8 => Array [],
@@ -1110,14 +1108,14 @@ describe('Timeline profiler', () => {
"reactVersion": "<filtered-version>",
"schedulingEvents": Array [
Object {
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.005,
"type": "schedule-render",
"warning": null,
},
Object {
"componentName": "App",
"lanes": "0b0000000000000000000000000000100",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.021,
"type": "schedule-state-update",
"warning": null,
@@ -1947,7 +1945,6 @@ describe('Timeline profiler', () => {
global.IS_REACT_ACT_ENVIRONMENT = true;
});
// @reactVersion >= 18.0
it('should process a sample legacy render sequence', async () => {
utils.legacyRender(<div />, document.createElement('div'));
utils.act(() => store.profilerStore.stopProfiling());
@@ -1963,7 +1960,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000010",
"timestamp": 10,
"type": "render-idle",
},
@@ -1971,7 +1968,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000010",
"timestamp": 10,
"type": "render",
},
@@ -1979,7 +1976,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000010",
"timestamp": 10,
"type": "commit",
},
@@ -1987,7 +1984,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000010",
"timestamp": 10,
"type": "layout-effects",
},
@@ -1998,13 +1995,13 @@ describe('Timeline profiler', () => {
"flamechart": Array [],
"internalModuleSourceToRanges": Map {},
"laneToLabelMap": Map {
1 => "Sync",
2 => "InputContinuousHydration",
4 => "InputContinuous",
8 => "DefaultHydration",
16 => "Default",
32 => "TransitionHydration",
64 => "Transition",
1 => "SyncHydrationLane",
2 => "Sync",
4 => "InputContinuousHydration",
8 => "InputContinuous",
16 => "DefaultHydration",
32 => "Default",
64 => "TransitionHydration",
128 => "Transition",
256 => "Transition",
512 => "Transition",
@@ -2020,7 +2017,7 @@ describe('Timeline profiler', () => {
524288 => "Transition",
1048576 => "Transition",
2097152 => "Transition",
4194304 => "Retry",
4194304 => "Transition",
8388608 => "Retry",
16777216 => "Retry",
33554432 => "Retry",
@@ -2031,12 +2028,13 @@ describe('Timeline profiler', () => {
1073741824 => "Offscreen",
},
"laneToReactMeasureMap": Map {
1 => Array [
1 => Array [],
2 => Array [
Object {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000010",
"timestamp": 10,
"type": "render-idle",
},
@@ -2044,7 +2042,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000010",
"timestamp": 10,
"type": "render",
},
@@ -2052,7 +2050,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000010",
"timestamp": 10,
"type": "commit",
},
@@ -2060,12 +2058,11 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000010",
"timestamp": 10,
"type": "layout-effects",
},
],
2 => Array [],
4 => Array [],
8 => Array [],
16 => Array [],
@@ -2102,7 +2099,7 @@ describe('Timeline profiler', () => {
"reactVersion": "<filtered-version>",
"schedulingEvents": Array [
Object {
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000010",
"timestamp": 10,
"type": "schedule-render",
"warning": null,
@@ -2117,7 +2114,6 @@ describe('Timeline profiler', () => {
`);
});
// @reactVersion >= 18.0
it('should process a sample createRoot render sequence', async () => {
function App() {
const [didMount, setDidMount] = React.useState(false);
@@ -2153,7 +2149,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "render-idle",
},
@@ -2161,7 +2157,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "render",
},
@@ -2169,7 +2165,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "commit",
},
@@ -2177,7 +2173,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "layout-effects",
},
@@ -2185,7 +2181,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "passive-effects",
},
@@ -2195,7 +2191,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "render-idle",
},
@@ -2203,7 +2199,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "render",
},
@@ -2211,7 +2207,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "commit",
},
@@ -2219,7 +2215,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "layout-effects",
},
@@ -2227,7 +2223,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "passive-effects",
},
@@ -2267,13 +2263,13 @@ describe('Timeline profiler', () => {
"flamechart": Array [],
"internalModuleSourceToRanges": Map {},
"laneToLabelMap": Map {
1 => "Sync",
2 => "InputContinuousHydration",
4 => "InputContinuous",
8 => "DefaultHydration",
16 => "Default",
32 => "TransitionHydration",
64 => "Transition",
1 => "SyncHydrationLane",
2 => "Sync",
4 => "InputContinuousHydration",
8 => "InputContinuous",
16 => "DefaultHydration",
32 => "Default",
64 => "TransitionHydration",
128 => "Transition",
256 => "Transition",
512 => "Transition",
@@ -2289,7 +2285,7 @@ describe('Timeline profiler', () => {
524288 => "Transition",
1048576 => "Transition",
2097152 => "Transition",
4194304 => "Retry",
4194304 => "Transition",
8388608 => "Retry",
16777216 => "Retry",
33554432 => "Retry",
@@ -2304,12 +2300,13 @@ describe('Timeline profiler', () => {
2 => Array [],
4 => Array [],
8 => Array [],
16 => Array [
16 => Array [],
32 => Array [
Object {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "render-idle",
},
@@ -2317,7 +2314,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "render",
},
@@ -2325,7 +2322,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "commit",
},
@@ -2333,7 +2330,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "layout-effects",
},
@@ -2341,7 +2338,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "passive-effects",
},
@@ -2349,7 +2346,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "render-idle",
},
@@ -2357,7 +2354,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "render",
},
@@ -2365,7 +2362,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "commit",
},
@@ -2373,7 +2370,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "layout-effects",
},
@@ -2381,12 +2378,11 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "passive-effects",
},
],
32 => Array [],
64 => Array [],
128 => Array [],
256 => Array [],
@@ -2419,7 +2415,7 @@ describe('Timeline profiler', () => {
"reactVersion": "<filtered-version>",
"schedulingEvents": Array [
Object {
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "schedule-render",
"warning": null,
@@ -2428,7 +2424,7 @@ describe('Timeline profiler', () => {
"componentName": "App",
"componentStack": "
in App (at **)",
"lanes": "0b0000000000000000000000000010000",
"lanes": "0b0000000000000000000000000100000",
"timestamp": 10,
"type": "schedule-state-update",
"warning": null,

115
packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
View File

@@ -21,6 +21,7 @@ let Suspense;
let act;
let IdleEventPriority;
let ContinuousEventPriority;
function dispatchMouseHoverEvent(to, from) {
if (!to) {
@@ -110,6 +111,18 @@ function TODO_scheduleIdleDOMSchedulerTask(fn) {
});
}
function TODO_scheduleContinuousSchedulerTask(fn) {
ReactDOM.unstable_runWithPriority(ContinuousEventPriority, () => {
const prevEvent = window.event;
window.event = {type: 'message'};
try {
fn();
} finally {
window.event = prevEvent;
}
});
}
describe('ReactDOMServerSelectiveHydration', () => {
beforeEach(() => {
jest.resetModuleRegistry();
@@ -125,6 +138,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
Suspense = React.Suspense;
IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
ContinuousEventPriority = require('react-reconciler/constants')
.ContinuousEventPriority;
});
it('hydrates the target boundary synchronously during a click', async () => {
@@ -1770,4 +1785,104 @@ describe('ReactDOMServerSelectiveHydration', () => {
document.body.removeChild(container);
});
it('can force hydration in response to sync update', () => {
function Child({text}) {
Scheduler.unstable_yieldValue(`Child ${text}`);
return <span ref={ref => (spanRef = ref)}>{text}</span>;
}
function App({text}) {
Scheduler.unstable_yieldValue(`App ${text}`);
return (
<div>
<Suspense fallback={null}>
<Child text={text} />
</Suspense>
</div>
);
}
let spanRef;
const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
expect(Scheduler).toHaveYielded(['App A', 'Child A']);
const container = document.createElement('div');
document.body.appendChild(container);
container.innerHTML = finalHTML;
const initialSpan = container.getElementsByTagName('span')[0];
const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
expect(Scheduler).toFlushUntilNextPaint(['App A']);
ReactDOM.flushSync(() => {
root.render(<App text="B" />);
});
expect(Scheduler).toHaveYielded(['App B', 'Child A', 'App B', 'Child B']);
expect(initialSpan).toBe(spanRef);
});
// @gate experimental || www
it('can force hydration in response to continuous update', () => {
function Child({text}) {
Scheduler.unstable_yieldValue(`Child ${text}`);
return <span ref={ref => (spanRef = ref)}>{text}</span>;
}
function App({text}) {
Scheduler.unstable_yieldValue(`App ${text}`);
return (
<div>
<Suspense fallback={null}>
<Child text={text} />
</Suspense>
</div>
);
}
let spanRef;
const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
expect(Scheduler).toHaveYielded(['App A', 'Child A']);
const container = document.createElement('div');
document.body.appendChild(container);
container.innerHTML = finalHTML;
const initialSpan = container.getElementsByTagName('span')[0];
const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
expect(Scheduler).toFlushUntilNextPaint(['App A']);
TODO_scheduleContinuousSchedulerTask(() => {
root.render(<App text="B" />);
});
expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']);
expect(initialSpan).toBe(spanRef);
});
it('can force hydration in response to default update', () => {
function Child({text}) {
Scheduler.unstable_yieldValue(`Child ${text}`);
return <span ref={ref => (spanRef = ref)}>{text}</span>;
}
function App({text}) {
Scheduler.unstable_yieldValue(`App ${text}`);
return (
<div>
<Suspense fallback={null}>
<Child text={text} />
</Suspense>
</div>
);
}
let spanRef;
const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
expect(Scheduler).toHaveYielded(['App A', 'Child A']);
const container = document.createElement('div');
document.body.appendChild(container);
container.innerHTML = finalHTML;
const initialSpan = container.getElementsByTagName('span')[0];
const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
expect(Scheduler).toFlushUntilNextPaint(['App A']);
ReactDOM.unstable_batchedUpdates(() => {
root.render(<App text="B" />);
});
expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']);
expect(initialSpan).toBe(spanRef);
});
});

74
packages/react-reconciler/src/ReactFiberLane.new.js
View File

@@ -36,39 +36,39 @@ export const TotalLanes = 31;
export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000;
export const NoLane: Lane = /* */ 0b0000000000000000000000000000000;
export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001;
export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001;
export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010;
export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000010;
export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000000100;
export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000;
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000001000;
export const DefaultLane: Lane = /* */ 0b0000000000000000000000000010000;
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000;
const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000000100000;
const TransitionLanes: Lanes = /* */ 0b0000000001111111111111111000000;
const TransitionLane1: Lane = /* */ 0b0000000000000000000000001000000;
const TransitionLane2: Lane = /* */ 0b0000000000000000000000010000000;
const TransitionLane3: Lane = /* */ 0b0000000000000000000000100000000;
const TransitionLane4: Lane = /* */ 0b0000000000000000000001000000000;
const TransitionLane5: Lane = /* */ 0b0000000000000000000010000000000;
const TransitionLane6: Lane = /* */ 0b0000000000000000000100000000000;
const TransitionLane7: Lane = /* */ 0b0000000000000000001000000000000;
const TransitionLane8: Lane = /* */ 0b0000000000000000010000000000000;
const TransitionLane9: Lane = /* */ 0b0000000000000000100000000000000;
const TransitionLane10: Lane = /* */ 0b0000000000000001000000000000000;
const TransitionLane11: Lane = /* */ 0b0000000000000010000000000000000;
const TransitionLane12: Lane = /* */ 0b0000000000000100000000000000000;
const TransitionLane13: Lane = /* */ 0b0000000000001000000000000000000;
const TransitionLane14: Lane = /* */ 0b0000000000010000000000000000000;
const TransitionLane15: Lane = /* */ 0b0000000000100000000000000000000;
const TransitionLane16: Lane = /* */ 0b0000000001000000000000000000000;
const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
const TransitionLanes: Lanes = /* */ 0b0000000011111111111111110000000;
const TransitionLane1: Lane = /* */ 0b0000000000000000000000010000000;
const TransitionLane2: Lane = /* */ 0b0000000000000000000000100000000;
const TransitionLane3: Lane = /* */ 0b0000000000000000000001000000000;
const TransitionLane4: Lane = /* */ 0b0000000000000000000010000000000;
const TransitionLane5: Lane = /* */ 0b0000000000000000000100000000000;
const TransitionLane6: Lane = /* */ 0b0000000000000000001000000000000;
const TransitionLane7: Lane = /* */ 0b0000000000000000010000000000000;
const TransitionLane8: Lane = /* */ 0b0000000000000000100000000000000;
const TransitionLane9: Lane = /* */ 0b0000000000000001000000000000000;
const TransitionLane10: Lane = /* */ 0b0000000000000010000000000000000;
const TransitionLane11: Lane = /* */ 0b0000000000000100000000000000000;
const TransitionLane12: Lane = /* */ 0b0000000000001000000000000000000;
const TransitionLane13: Lane = /* */ 0b0000000000010000000000000000000;
const TransitionLane14: Lane = /* */ 0b0000000000100000000000000000000;
const TransitionLane15: Lane = /* */ 0b0000000001000000000000000000000;
const TransitionLane16: Lane = /* */ 0b0000000010000000000000000000000;
const RetryLanes: Lanes = /* */ 0b0000111110000000000000000000000;
const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000;
const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000;
const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000;
const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000;
const RetryLane5: Lane = /* */ 0b0000100000000000000000000000000;
const RetryLanes: Lanes = /* */ 0b0000111100000000000000000000000;
const RetryLane1: Lane = /* */ 0b0000000100000000000000000000000;
const RetryLane2: Lane = /* */ 0b0000001000000000000000000000000;
const RetryLane3: Lane = /* */ 0b0000010000000000000000000000000;
const RetryLane4: Lane = /* */ 0b0000100000000000000000000000000;
export const SomeRetryLane: Lane = RetryLane1;
@@ -85,6 +85,9 @@ export const OffscreenLane: Lane = /* */ 0b1000000000000000000
// It should be kept in sync with the Lanes values above.
export function getLabelForLane(lane: Lane): string | void {
if (enableSchedulingProfiler) {
if (lane & SyncHydrationLane) {
return 'SyncHydrationLane';
}
if (lane & SyncLane) {
return 'Sync';
}
@@ -131,6 +134,8 @@ let nextRetryLane: Lane = RetryLane1;
function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
switch (getHighestPriorityLane(lanes)) {
case SyncHydrationLane:
return SyncHydrationLane;
case SyncLane:
return SyncLane;
case InputContinuousHydrationLane:
@@ -164,7 +169,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
return lanes & RetryLanes;
case SelectiveHydrationLane:
return SelectiveHydrationLane;
@@ -327,6 +331,7 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
function computeExpirationTime(lane: Lane, currentTime: number) {
switch (lane) {
case SyncHydrationLane:
case SyncLane:
case InputContinuousHydrationLane:
case InputContinuousLane:
@@ -364,7 +369,6 @@ function computeExpirationTime(lane: Lane, currentTime: number) {
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
// TODO: Retries should be allowed to expire if they are CPU bound for
// too long, but when I made this change it caused a spike in browser
// crashes. There must be some other underlying bug; not super urgent but
@@ -459,7 +463,7 @@ export function getLanesToRetrySynchronouslyOnError(
}
export function includesSyncLane(lanes: Lanes): boolean {
return (lanes & SyncLane) !== NoLanes;
return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes;
}
export function includesNonIdleWork(lanes: Lanes): boolean {
@@ -469,6 +473,8 @@ export function includesOnlyRetries(lanes: Lanes): boolean {
return (lanes & RetryLanes) === lanes;
}
export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
// TODO: Should hydration lanes be included here? This function is only
// used in `updateDeferredValueImpl`.
const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
return (lanes & UrgentLanes) === NoLanes;
}
@@ -749,6 +755,9 @@ export function getBumpedLaneForHydration(
let lane;
switch (renderLane) {
case SyncLane:
lane = SyncHydrationLane;
break;
case InputContinuousLane:
lane = InputContinuousHydrationLane;
break;
@@ -775,7 +784,6 @@ export function getBumpedLaneForHydration(
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
lane = TransitionHydrationLane;
break;
case IdleLane:

74
packages/react-reconciler/src/ReactFiberLane.old.js
View File

@@ -36,39 +36,39 @@ export const TotalLanes = 31;
export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000;
export const NoLane: Lane = /* */ 0b0000000000000000000000000000000;
export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001;
export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001;
export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010;
export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000010;
export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000000100;
export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000;
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000001000;
export const DefaultLane: Lane = /* */ 0b0000000000000000000000000010000;
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000;
const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000000100000;
const TransitionLanes: Lanes = /* */ 0b0000000001111111111111111000000;
const TransitionLane1: Lane = /* */ 0b0000000000000000000000001000000;
const TransitionLane2: Lane = /* */ 0b0000000000000000000000010000000;
const TransitionLane3: Lane = /* */ 0b0000000000000000000000100000000;
const TransitionLane4: Lane = /* */ 0b0000000000000000000001000000000;
const TransitionLane5: Lane = /* */ 0b0000000000000000000010000000000;
const TransitionLane6: Lane = /* */ 0b0000000000000000000100000000000;
const TransitionLane7: Lane = /* */ 0b0000000000000000001000000000000;
const TransitionLane8: Lane = /* */ 0b0000000000000000010000000000000;
const TransitionLane9: Lane = /* */ 0b0000000000000000100000000000000;
const TransitionLane10: Lane = /* */ 0b0000000000000001000000000000000;
const TransitionLane11: Lane = /* */ 0b0000000000000010000000000000000;
const TransitionLane12: Lane = /* */ 0b0000000000000100000000000000000;
const TransitionLane13: Lane = /* */ 0b0000000000001000000000000000000;
const TransitionLane14: Lane = /* */ 0b0000000000010000000000000000000;
const TransitionLane15: Lane = /* */ 0b0000000000100000000000000000000;
const TransitionLane16: Lane = /* */ 0b0000000001000000000000000000000;
const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
const TransitionLanes: Lanes = /* */ 0b0000000011111111111111110000000;
const TransitionLane1: Lane = /* */ 0b0000000000000000000000010000000;
const TransitionLane2: Lane = /* */ 0b0000000000000000000000100000000;
const TransitionLane3: Lane = /* */ 0b0000000000000000000001000000000;
const TransitionLane4: Lane = /* */ 0b0000000000000000000010000000000;
const TransitionLane5: Lane = /* */ 0b0000000000000000000100000000000;
const TransitionLane6: Lane = /* */ 0b0000000000000000001000000000000;
const TransitionLane7: Lane = /* */ 0b0000000000000000010000000000000;
const TransitionLane8: Lane = /* */ 0b0000000000000000100000000000000;
const TransitionLane9: Lane = /* */ 0b0000000000000001000000000000000;
const TransitionLane10: Lane = /* */ 0b0000000000000010000000000000000;
const TransitionLane11: Lane = /* */ 0b0000000000000100000000000000000;
const TransitionLane12: Lane = /* */ 0b0000000000001000000000000000000;
const TransitionLane13: Lane = /* */ 0b0000000000010000000000000000000;
const TransitionLane14: Lane = /* */ 0b0000000000100000000000000000000;
const TransitionLane15: Lane = /* */ 0b0000000001000000000000000000000;
const TransitionLane16: Lane = /* */ 0b0000000010000000000000000000000;
const RetryLanes: Lanes = /* */ 0b0000111110000000000000000000000;
const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000;
const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000;
const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000;
const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000;
const RetryLane5: Lane = /* */ 0b0000100000000000000000000000000;
const RetryLanes: Lanes = /* */ 0b0000111100000000000000000000000;
const RetryLane1: Lane = /* */ 0b0000000100000000000000000000000;
const RetryLane2: Lane = /* */ 0b0000001000000000000000000000000;
const RetryLane3: Lane = /* */ 0b0000010000000000000000000000000;
const RetryLane4: Lane = /* */ 0b0000100000000000000000000000000;
export const SomeRetryLane: Lane = RetryLane1;
@@ -85,6 +85,9 @@ export const OffscreenLane: Lane = /* */ 0b1000000000000000000
// It should be kept in sync with the Lanes values above.
export function getLabelForLane(lane: Lane): string | void {
if (enableSchedulingProfiler) {
if (lane & SyncHydrationLane) {
return 'SyncHydrationLane';
}
if (lane & SyncLane) {
return 'Sync';
}
@@ -131,6 +134,8 @@ let nextRetryLane: Lane = RetryLane1;
function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
switch (getHighestPriorityLane(lanes)) {
case SyncHydrationLane:
return SyncHydrationLane;
case SyncLane:
return SyncLane;
case InputContinuousHydrationLane:
@@ -164,7 +169,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
return lanes & RetryLanes;
case SelectiveHydrationLane:
return SelectiveHydrationLane;
@@ -327,6 +331,7 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
function computeExpirationTime(lane: Lane, currentTime: number) {
switch (lane) {
case SyncHydrationLane:
case SyncLane:
case InputContinuousHydrationLane:
case InputContinuousLane:
@@ -364,7 +369,6 @@ function computeExpirationTime(lane: Lane, currentTime: number) {
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
// TODO: Retries should be allowed to expire if they are CPU bound for
// too long, but when I made this change it caused a spike in browser
// crashes. There must be some other underlying bug; not super urgent but
@@ -459,7 +463,7 @@ export function getLanesToRetrySynchronouslyOnError(
}
export function includesSyncLane(lanes: Lanes): boolean {
return (lanes & SyncLane) !== NoLanes;
return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes;
}
export function includesNonIdleWork(lanes: Lanes): boolean {
@@ -469,6 +473,8 @@ export function includesOnlyRetries(lanes: Lanes): boolean {
return (lanes & RetryLanes) === lanes;
}
export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
// TODO: Should hydration lanes be included here? This function is only
// used in `updateDeferredValueImpl`.
const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
return (lanes & UrgentLanes) === NoLanes;
}
@@ -749,6 +755,9 @@ export function getBumpedLaneForHydration(
let lane;
switch (renderLane) {
case SyncLane:
lane = SyncHydrationLane;
break;
case InputContinuousLane:
lane = InputContinuousHydrationLane;
break;
@@ -775,7 +784,6 @@ export function getBumpedLaneForHydration(
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
lane = TransitionHydrationLane;
break;
case IdleLane:

15
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
View File

@@ -141,7 +141,7 @@ import {
NoTimestamp,
claimNextTransitionLane,
claimNextRetryLane,
includesSomeLane,
includesSyncLane,
isSubsetOfLanes,
mergeLanes,
removeLanes,
@@ -918,7 +918,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
// TODO: Temporary until we confirm this warning is not fired.
if (
existingCallbackNode == null &&
existingCallbackPriority !== SyncLane
!includesSyncLane(existingCallbackPriority)
) {
console.error(
'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -936,7 +936,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
// Schedule a new callback.
let newCallbackNode;
if (newCallbackPriority === SyncLane) {
if (includesSyncLane(newCallbackPriority)) {
// Special case: Sync React callbacks are scheduled on a special
// internal queue
if (root.tag === LegacyRoot) {
@@ -1480,7 +1480,7 @@ function performSyncWorkOnRoot(root) {
flushPassiveEffects();
let lanes = getNextLanes(root, NoLanes);
if (!includesSomeLane(lanes, SyncLane)) {
if (!includesSyncLane(lanes)) {
// There's no remaining sync work left.
ensureRootIsScheduled(root, now());
return null;
@@ -2930,16 +2930,13 @@ function commitRootImpl(
// TODO: We can optimize this by not scheduling the callback earlier. Since we
// currently schedule the callback in multiple places, will wait until those
// are consolidated.
if (
includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
root.tag !== LegacyRoot
) {
if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) {
flushPassiveEffects();
}
// Read this again, since a passive effect might have updated it
remainingLanes = root.pendingLanes;
if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
if (includesSyncLane(remainingLanes)) {
if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
markNestedUpdateScheduled();
}

15
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
View File

@@ -141,7 +141,7 @@ import {
NoTimestamp,
claimNextTransitionLane,
claimNextRetryLane,
includesSomeLane,
includesSyncLane,
isSubsetOfLanes,
mergeLanes,
removeLanes,
@@ -918,7 +918,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
// TODO: Temporary until we confirm this warning is not fired.
if (
existingCallbackNode == null &&
existingCallbackPriority !== SyncLane
!includesSyncLane(existingCallbackPriority)
) {
console.error(
'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -936,7 +936,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
// Schedule a new callback.
let newCallbackNode;
if (newCallbackPriority === SyncLane) {
if (includesSyncLane(newCallbackPriority)) {
// Special case: Sync React callbacks are scheduled on a special
// internal queue
if (root.tag === LegacyRoot) {
@@ -1480,7 +1480,7 @@ function performSyncWorkOnRoot(root) {
flushPassiveEffects();
let lanes = getNextLanes(root, NoLanes);
if (!includesSomeLane(lanes, SyncLane)) {
if (!includesSyncLane(lanes)) {
// There's no remaining sync work left.
ensureRootIsScheduled(root, now());
return null;
@@ -2930,16 +2930,13 @@ function commitRootImpl(
// TODO: We can optimize this by not scheduling the callback earlier. Since we
// currently schedule the callback in multiple places, will wait until those
// are consolidated.
if (
includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
root.tag !== LegacyRoot
) {
if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) {
flushPassiveEffects();
}
// Read this again, since a passive effect might have updated it
remainingLanes = root.pendingLanes;
if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
if (includesSyncLane(remainingLanes)) {
if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
markNestedUpdateScheduled();
}

17
packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
View File

@@ -16,8 +16,9 @@ describe('DebugTracing', () => {
let logs;
const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000';
const RETRY_LANE_STRING = '0b0000000010000000000000000000000';
const SYNC_LANE_STRING = '0b0000000000000000000000000000010';
const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000';
const RETRY_LANE_STRING = '0b0000000100000000000000000000000';
global.IS_REACT_ACT_ENVIRONMENT = true;
@@ -87,9 +88,9 @@ describe('DebugTracing', () => {
);
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000000000000001)',
`group: ⚛️ render (${SYNC_LANE_STRING})`,
'log: ⚛️ Example suspended',
'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
`groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
]);
logs.splice(0);
@@ -121,9 +122,9 @@ describe('DebugTracing', () => {
);
expect(logs).toEqual([
'group: ⚛️ render (0b0000000000000000000000000000001)',
`group: ⚛️ render (${SYNC_LANE_STRING})`,
'log: <Wrapper/>',
'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
`groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
]);
logs.splice(0);
@@ -237,7 +238,7 @@ describe('DebugTracing', () => {
expect(logs).toEqual([
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
`log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
]);
@@ -295,7 +296,7 @@ describe('DebugTracing', () => {
expect(logs).toEqual([
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
`log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
]);