Skip to content

Convert ReactDOMFiber to createRoot#28077

Merged
rickhanlonii merged 2 commits intofacebook:mainfrom
rickhanlonii:rh/test-fiber
Jan 25, 2024
Merged

Convert ReactDOMFiber to createRoot#28077
rickhanlonii merged 2 commits intofacebook:mainfrom
rickhanlonii:rh/test-fiber

Conversation

@rickhanlonii
Copy link
Copy Markdown
Member

@rickhanlonii rickhanlonii commented Jan 24, 2024

Copies the existing tests to ReactDOMLegacyFiber, and updates ReactDOMFiber to new root.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 24, 2024
@react-sizebot
Copy link
Copy Markdown

react-sizebot commented Jan 24, 2024

Comparing: ee1eb48...3caa265

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 176.24 kB 176.24 kB = 54.88 kB 54.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 178.34 kB 178.34 kB = 55.53 kB 55.53 kB
facebook-www/ReactDOM-prod.classic.js = 571.94 kB 571.94 kB = 100.56 kB 100.56 kB
facebook-www/ReactDOM-prod.modern.js = 555.70 kB 555.70 kB = 97.62 kB 97.62 kB
test_utils/ReactAllWarnings.js Deleted 67.55 kB 0.00 kB Deleted 16.54 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
test_utils/ReactAllWarnings.js Deleted 67.55 kB 0.00 kB Deleted 16.54 kB 0.00 kB

Generated by 🚫 dangerJS against 3caa265

rickhanlonii
rickhanlonii commented Jan 24, 2024
View reviewed changes
Comment thread packages/react-dom/src/__tests__/ReactDOMFiber-test.js
expect(container.textContent).toEqual('10');
});

it('finds the DOM Text node of a string child', () => {
Copy link
Copy Markdown
Member Author

@rickhanlonii rickhanlonii Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I deleted all the findDOMNode tests from this file, they still exist in ReactDOMLegacyFiber.

Comment thread packages/react-dom/src/__tests__/ReactDOMFiber-test.js
expect(portalContainer.innerHTML).toBe('<div>bar</div>');
});

// @gate !disableLegacyContext
Copy link
Copy Markdown
Member Author

@rickhanlonii rickhanlonii Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deleted this because they depend on legacy context, they still exist in ReactDOMLegacyFiber.

Comment thread packages/react-dom/src/__tests__/ReactDOMFiber-test.js
ReactDOM.flushSync(() => {
root.render(<div key="2">baz</div>);
});
}).toThrow('The node to be removed is not a child of this node');
Copy link
Copy Markdown
Member Author

@rickhanlonii rickhanlonii Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: the old console.error only existed in the legacy root, the new root only throws.

Comment thread packages/react-dom/src/__tests__/ReactDOMFiber-test.js
root.render(<div>baz</div>);
});
// TODO: why not, and no error?
expect(container.innerHTML).toBe('<div>MEOW.</div>');
Copy link
Copy Markdown
Member Author

@rickhanlonii rickhanlonii Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is weird to me, it looks like we don't error when you do an update to a component that was manually updated (see this test and the one below it). It just silently keeps the content that was replaced in the DOM.

We do error if we do a replacement though (see test above).

Is this a bug @acdlite?

Comment thread packages/react-dom/src/__tests__/ReactDOMFiber-test.js
expect(didCallOnChange).toBe(true);
});

it('unmounted legacy roots should never clear newer root content from a container', () => {
Copy link
Copy Markdown
Member Author

@rickhanlonii rickhanlonii Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deleted legacy only test, new roots can't be updated after they're unmounted, which we have tests elsewhere for. Still exists in ReactDOMLegacyFiber

@rickhanlonii rickhanlonii marked this pull request as ready for review January 24, 2024 19:21
@rickhanlonii rickhanlonii changed the title Rh/test fiber Convert ReactDOMFiber to createRoot Jan 24, 2024
rickhanlonii
rickhanlonii commented Jan 24, 2024
View reviewed changes
Comment thread packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -719,7 +690,7 @@ describe('ReactDOMFiber', () => {
});

// @gate !disableLegacyContext
Copy link
Copy Markdown
Member Author

@rickhanlonii rickhanlonii Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can remove this.

jackpope
jackpope approved these changes Jan 24, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@jackpope jackpope left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Walked through this one with Rick. Missing errors with createRoot are concerning but seems ok to land this migration work that represents the current behavior and follow up with fix on the error messaging if needed.

@rickhanlonii rickhanlonii merged commit 696953f into facebook:main Jan 25, 2024
@rickhanlonii rickhanlonii deleted the rh/test-fiber branch January 25, 2024 04:55
@gnoff gnoff mentioned this pull request Feb 1, 2024
Merged
gnoff added a commit to gnoff/next.js that referenced this pull request Feb 6, 2024
@gnoff
updated React from 60a927d04 to 2bc7d336a.
6290768 
- facebook/react#28250
- facebook/react#28225
- facebook/react#28123
- facebook/react#28240
- facebook/react#28239
- facebook/react#28245
- facebook/react#28244
- facebook/react#28238
- facebook/react#28235
- facebook/react#28221
- facebook/react#28215
- facebook/react#28214
- facebook/react#28213
- facebook/react#28212
- facebook/react#28211
- facebook/react#28247
- facebook/react#28210
- facebook/react#28186
- facebook/react#28232
- facebook/react#28169
- facebook/react#28177
- facebook/react#28170
- facebook/react#28168
- facebook/react#28122
- facebook/react#27982
- facebook/react#28217
- facebook/react#28223
- facebook/react#28208
- facebook/react#28209
- facebook/react#28200
- facebook/react#28199
- facebook/react#28198
- facebook/react#28197
- facebook/react#28196
- facebook/react#28194
- facebook/react#28192
- facebook/react#28191
- facebook/react#28182
- facebook/react#28181
- facebook/react#28180
- facebook/react#28178
- facebook/react#28201
- facebook/react#28176
- facebook/react#28162
- facebook/react#28131
- facebook/react#28190
- facebook/react#28172
- facebook/react#28171
- facebook/react#28173
- facebook/react#28174
- facebook/react#28175
- facebook/react#28136
- facebook/react#28135
- facebook/react#28134
- facebook/react#28133
- facebook/react#28132
- facebook/react#28130
- facebook/react#28202
- facebook/react#28102
- facebook/react#28161
- facebook/react#28193
- facebook/react#28195
- facebook/react#28189
- facebook/react#28160
- facebook/react#28096
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
gnoff added a commit to vercel/next.js that referenced this pull request Feb 6, 2024
@gnoff
Update React from 60a927d04 to 2bc7d336a (#61522)
2395557 
Updates React from 60a927d04 to 2bc7d336a

Also updates aliases for `react.shared-subset` to `react.react-server`

### React upstream changes

- facebook/react#28250
- facebook/react#28225
- facebook/react#28123
- facebook/react#28240
- facebook/react#28239
- facebook/react#28245
- facebook/react#28244
- facebook/react#28238
- facebook/react#28235
- facebook/react#28221
- facebook/react#28215
- facebook/react#28214
- facebook/react#28213
- facebook/react#28212
- facebook/react#28211
- facebook/react#28247
- facebook/react#28210
- facebook/react#28186
- facebook/react#28232
- facebook/react#28169
- facebook/react#28177
- facebook/react#28170
- facebook/react#28168
- facebook/react#28122
- facebook/react#27982
- facebook/react#28217
- facebook/react#28223
- facebook/react#28208
- facebook/react#28209
- facebook/react#28200
- facebook/react#28199
- facebook/react#28198
- facebook/react#28197
- facebook/react#28196
- facebook/react#28194
- facebook/react#28192
- facebook/react#28191
- facebook/react#28182
- facebook/react#28181
- facebook/react#28180
- facebook/react#28178
- facebook/react#28201
- facebook/react#28176
- facebook/react#28162
- facebook/react#28131
- facebook/react#28190
- facebook/react#28172
- facebook/react#28171
- facebook/react#28173
- facebook/react#28174
- facebook/react#28175
- facebook/react#28136
- facebook/react#28135
- facebook/react#28134
- facebook/react#28133
- facebook/react#28132
- facebook/react#28130
- facebook/react#28202
- facebook/react#28102
- facebook/react#28161
- facebook/react#28193
- facebook/react#28195
- facebook/react#28189
- facebook/react#28160
- facebook/react#28096
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939

Closes NEXT-2331
@ztanner ztanner mentioned this pull request Mar 19, 2024
Closed
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
@rickhanlonii @AndyPengc12
Convert ReactDOMFiber to createRoot (facebook#28077)
b5990f3 
Copies the existing tests to `ReactDOMLegacyFiber`, and updates
`ReactDOMFiber` to new root.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jackpope jackpope jackpope approved these changes

Assignees

No one assigned

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@rickhanlonii @react-sizebot @jackpope @facebook-github-bot