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.

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

Upgrade to React 18 #32765

Closed
wants to merge 17 commits into from
Closed

Upgrade to React 18 #32765

wants to merge 17 commits into from

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Jun 17, 2021

Closes #41559.
Fixes #43077.

Do not merge.

React 18 is still in alpha version and might not be released before months, but it's always good to check impact and give feedback.

It also comes with a nice set of concurrency features that could prove to be good for performance reasons.

This PR just tries to upgrade to the alpha version to check the tests and all.

@github-actions
Copy link

github-actions bot commented Jun 17, 2021

Size Change: +4.55 kB (0%)

Total Size: 1.23 MB

Filename Size Change
build/block-editor/index.min.js 152 kB +1.84 kB (+1%)
build/block-library/index.min.js 177 kB +18 B (0%)
build/components/index.min.js 222 kB +68 B (0%)
build/compose/index.min.js 11.3 kB +16 B (0%)
build/edit-post/index.min.js 30.2 kB +30 B (0%)
build/editor/index.min.js 38.2 kB -88 B (0%)
build/element/index.min.js 4.43 kB +140 B (+3%)
build/vendors/react-dom.min.js 41.4 kB +2.83 kB (+7%) 🔍
build/vendors/react.min.js 4.04 kB -298 B (-7%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.77 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 6.51 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/style-rtl.css 15 kB
build/block-editor/style.css 15 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 59 B
build/block-library/blocks/avatar/style.css 59 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 445 B
build/block-library/blocks/button/editor.css 445 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-query-loop/editor-rtl.css 95 B
build/block-library/blocks/comments-query-loop/editor.css 95 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.53 kB
build/block-library/blocks/cover/style.css 1.53 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 961 B
build/block-library/blocks/gallery/editor.css 964 B
build/block-library/blocks/gallery/style-rtl.css 1.51 kB
build/block-library/blocks/gallery/style.css 1.51 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 333 B
build/block-library/blocks/group/editor.css 333 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 529 B
build/block-library/blocks/image/style.css 535 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 447 B
build/block-library/blocks/latest-posts/style.css 446 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 708 B
build/block-library/blocks/navigation-link/editor.css 706 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/view.min.js 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.93 kB
build/block-library/blocks/navigation/style.css 1.92 kB
build/block-library/blocks/navigation/view-modal.min.js 2.65 kB
build/block-library/blocks/navigation/view.min.js 395 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 69 B
build/block-library/blocks/post-comments-form/editor.css 69 B
build/block-library/blocks/post-comments-form/style-rtl.css 521 B
build/block-library/blocks/post-comments-form/style.css 521 B
build/block-library/blocks/post-comments/editor-rtl.css 77 B
build/block-library/blocks/post-comments/editor.css 77 B
build/block-library/blocks/post-comments/style-rtl.css 511 B
build/block-library/blocks/post-comments/style.css 511 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 323 B
build/block-library/blocks/post-template/style.css 323 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 370 B
build/block-library/blocks/pullquote/style.css 370 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 369 B
build/block-library/blocks/query/editor.css 369 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 140 B
build/block-library/blocks/separator/editor.css 140 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 759 B
build/block-library/blocks/site-logo/editor.css 759 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB
build/block-library/blocks/social-links/style.css 1.36 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 504 B
build/block-library/blocks/table/editor.css 504 B
build/block-library/blocks/table/style-rtl.css 625 B
build/block-library/blocks/table/style.css 625 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 993 B
build/block-library/common.css 990 B
build/block-library/editor-rtl.css 10.3 kB
build/block-library/editor.css 10.3 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 11.5 kB
build/block-library/style.css 11.5 kB
build/block-library/theme-rtl.css 689 B
build/block-library/theme.css 694 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 47 kB
build/components/style-rtl.css 15 kB
build/components/style.css 15 kB
build/core-data/index.min.js 14.5 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.39 kB
build/customize-widgets/style.css 1.39 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 7.66 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.58 kB
build/edit-navigation/index.min.js 15.8 kB
build/edit-navigation/style-rtl.css 4.05 kB
build/edit-navigation/style.css 4.05 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/style-rtl.css 7.02 kB
build/edit-post/style.css 7.02 kB
build/edit-site/index.min.js 47.5 kB
build/edit-site/style-rtl.css 7.95 kB
build/edit-site/style.css 7.93 kB
build/edit-widgets/index.min.js 16.3 kB
build/edit-widgets/style-rtl.css 4.41 kB
build/edit-widgets/style.css 4.4 kB
build/editor/style-rtl.css 3.67 kB
build/editor/style.css 3.67 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 6.62 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.83 kB
build/keycodes/index.min.js 1.41 kB
build/list-reusable-blocks/index.min.js 1.75 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.1 kB
build/nux/style-rtl.css 751 B
build/nux/style.css 749 B
build/plugins/index.min.js 1.98 kB
build/preferences-persistence/index.min.js 2.1 kB
build/preferences/index.min.js 1.32 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 628 B
build/react-i18n/index.min.js 704 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.24 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.2 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 668 B
build/url/index.min.js 1.99 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.07 kB

compressed-size-action

@gziolo gziolo added [Package] Element /packages/element [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible labels Jun 18, 2021
@gaearon
Copy link

gaearon commented Jun 18, 2021

Note that StrictMode is "stricter" in 18 (details). So if parts of your tree are broken after switching to createRoot, you might want to try without StrictMode and see if that's the issue.

@youknowriad
Copy link
Contributor Author

Thanks for chiming in @gaearon and for the hint. My understanding was that StrictMode only run its logic (constructors and unmount reruns) on "dev" and not on "prod" right? The e2e tests here are run on production code.

The good news is that React 18 is definitely faster than React 17 without any change. (according to our perf metrics)

Measure React 18 React 17
load '6489.8 ms' '6863.8 ms'
type '35.51 ms' '39.25 ms'
minType '28.06 ms' '31.25 ms'
maxType '310.42 ms' '311.56 ms'
focus '55.75 ms' '98.54 ms'
minFocus '26.54 ms' '59.18 ms'
maxFocus '249.43 ms' '307.91 ms'
inserterOpen '329.87 ms' '580.18 ms'
minInserterOpen '300.07 ms' '511.39 ms'
maxInserterOpen '511.17 ms' '1021.19 ms'
inserterHover '23.31 ms' '25.04 ms'
minInserterHover '19.2 ms' '20.58 ms'
maxInserterHover '31.53 ms' '34.95 ms'

@gaearon
Copy link

gaearon commented Jun 18, 2021

My understanding was that StrictMode only run its logic (constructors and unmount reruns) on "dev" and not on "prod" right? The e2e tests here are run on production code.

Yes. Just pointing out in case you run into this later.

@Mamaduka
Copy link
Member

Time to resume testing - https://reactjs.org/blog/2022/03/29/react-v18.html

@youknowriad
Copy link
Contributor Author

Indeed, I'm curious about react-native timing though which would be a requirement for us before upgrading.

@youknowriad
Copy link
Contributor Author

Updated to the stable version, I'm working on fixing some unit tests. But given the number of failures in our CI, this is probably going to require a group effort.

@youknowriad youknowriad requested a review from ellatrix as a code owner March 30, 2022 09:11
@Mamaduka
Copy link
Member

It looks like most tests that fail use enzyme. So we could probably skip them and slowly convert them to Testing Library.

@gziolo
Copy link
Member

gziolo commented Mar 30, 2022

It looks like most tests that fail use enzyme. So we could probably skip them and slowly convert them to Testing Library.

That would be great to finally make that happen. I'm all in favor of getting rid of enzyme altogether as part of the efforts.

It looks like similar issues apply to the testing tools from the React team. @youknowriad, can you share some details what you discovered while testing some of the tests to help others?

@youknowriad
Copy link
Contributor Author

Yes, so here are the few things I discovered so far:

both mount from enzyme and TestUtils.renderIntoDocument render using the old rendering behavior instead of using createRoot which triggers a "warning" in the console, breaking our tests because of our console assertions.

I considered silencing these by accepting that these warnings are thrown (I don't know how to do it though), but then I saw that there was only like 30 tests remaining. I thought it could be doable to update these but I'm not sure :P

@youknowriad
Copy link
Contributor Author

Anyway, I'm taking a break from this PR for now, please if you want to help with the tests, go for it :P

@youknowriad
Copy link
Contributor Author

The other thing is that ReactTestUtils.act triggers a warning because some global variable is not set properly (apparently an issue with jsdom), so a workaround could be to set this global variable ourselves (see here 32f8fd5#diff-9f4dbbdd67efdfd0e5e1b90d84e313908a3ea5887162c7eb30c9dfbfda3febc9R26 ) or use jest.runAllTimers() instead of wrapping rendering and updates with act

@youknowriad youknowriad force-pushed the try/react-18 branch 2 times, most recently from 1e9f4e3 to 2124747 Compare April 1, 2022 15:19
@@ -259,7 +259,7 @@ describe( 'UnitControl', () => {
);
} );

it( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
it.skip( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is potentially a breaking change somehow or maybe we need to check something internally but basically, there's a callback being called twice now.

@youknowriad
Copy link
Contributor Author

I fixed all the unit tests, I think there's one that might be a real failure due to React 18. I skipped it for now until I investigate it more deeply. #32765 (comment)

I'd like to look at e2e tests later.

@Mamaduka
Copy link
Member

React Native 0.69 was released a few days ago - https://reactnative.dev/blog/2022/06/21/version-069.

@geriux
Copy link
Member

geriux commented Aug 11, 2022

Hey there 👋 we are working on the React native upgrade that uses React 18. I was wondering who's working on this PR as we will need to pull these changes, there are quite a few conflicts at the moment 😅

@youknowriad
Copy link
Contributor Author

Hi there! no one is working on this PR at the moment. I just got back from a long break, so I might not be able to pick it up right away. Please feel free to take over for the moment.

@tyxla
Copy link
Member

tyxla commented Sep 8, 2022

Noting that I've actively been working on removing enzyme from the remaining tests (mostly in favor of @testing-library/react) and I'm happy to pick this up once we've fully said goodbye to enzyme.

@mdmag
Copy link

mdmag commented Sep 30, 2022

Any news on this?
We are waiting for this PR!

@tyxla
Copy link
Member

tyxla commented Sep 30, 2022

We're hoping to reattempt it the following days, now that Enzyme is gone.

@aczire
Copy link

aczire commented Sep 30, 2022

Hey, I was trying to see whether this upgrade would upgrade @wordpress/jest-preset-default as well?
Since @wordpress/scripts uses @wordpress/jest-preset-default , currently there is no way to use react-18 with @wordpress/scripts now. Any idea?

@jsnajdr
Copy link
Member

jsnajdr commented Oct 4, 2022

Having looked through all the changes in this PR, here is a summary of what I saw and what could be a way forward:

Unit tests: Many removals of enzyme and migrations to @testing-library. These migrations were all done separately and are merged in trunk by now. Many changes in the diff also involved wrapping complex event interactions, like focus + change + keydown when typing into fields, into act() calls. This is now done with [user-event](https://testing-library.com/docs/user-event/intro), a high-level library that simulates complete user interactions instead of individual DOM events.

The only part of unit tests changes that's not in trunk yet is using createRoot in several tests, mostly related to SlotFill usages. @tyxla says he'll be working on these.

Types: Several files are modified only to fix type annotations (Flyout, useDialog, useFocusOutside) or add checks (like Number.isNaN( newPosition.x ) in ImageCropper) to fix type errors reported by the typechecker. All these changes could be a standalone PR.

Introducing queueMicrotask calls: There are several timing issues that are fixed by adding queueMicrotask callbacks here and there. In useInputRules, Navigation, useAsyncList. These fixes all look suspicious -- there's probably some deeper issue that should be fixed instead. These changes need some critical evaluation.

Event timing in e2e tests: There are many places, e.g., the dragAndResize helper, where e2e tests trigger multiple DOM events, simulating complex interactions, and now failures are fixed by interleaving them with requestIdleCallback calls that add delays between events. That's also suspicious -- what's exactly the matter with these timings and can we fix them systematically?

Component bugfixes: Here React 18 apparently uncovered some existing bugs:

  • in useSaveImage, we're storing a settings prop to ref and refactoring effect dependencies
  • in Guide, we're fixing a focus loss when a currentPage value changes.
  • the PostPreviewButton component gets a major refactor, and also converts the writeInterstitialMessage to a data store action, although it works with DOM rather than with data (?).
  • the PreviewOptions component gets an API change (adding a param to a render prop) whose relation to React 18 I don't understand yet.

And that's all, the remaining changes are straightforward: add createRoot support to the element package, and then do the actual migration by upgrading NPM dependencies in package.json files.

@tyxla
Copy link
Member

tyxla commented Oct 4, 2022

Thanks for the summary, @jsnajdr, that's really helpful!

I've addressed a few of those legacy rendering ones in the following PRs:

I'm planning to be working on the rest soon.

@youknowriad
Copy link
Contributor Author

the PreviewOptions component gets an API change (adding a param to a render prop) whose relation to React 18 I don't understand yet.

I think the previous implementation was broken in the sense of that it relied on React lifecycle too much (I knew the exact reason but forgot :) ) which caused sometimes the preview page to not be set properly. The refactor I did was to actually move the logic to an action creator instead of being split across lifecycle methods (if I remember properly)

@tyxla
Copy link
Member

tyxla commented Oct 5, 2022

Opened a few more instances to tackle regarding changes in tests - we're using @testing-library which makes it easy to migrate without having to change to createRoot() when we upgrade to React 18:

@PooSham
Copy link
Contributor

PooSham commented Oct 5, 2022

Hey, I was trying to see whether this upgrade would upgrade @wordpress/jest-preset-default as well? Since @wordpress/scripts uses @wordpress/jest-preset-default , currently there is no way to use react-18 with @wordpress/scripts now. Any idea?

I created a PR here: #44680

@jsnajdr
Copy link
Member

jsnajdr commented Oct 12, 2022

I think the previous implementation was broken in the sense of that it relied on React lifecycle too much (I knew the exact reason but forgot :) ) which caused sometimes the preview page to not be set properly.

The code that does save/autosave and then, in a lifecycle, watches the getEditedPostPreviewLink() result go to undefined and back, and setting the preview window location, indeed looks fragile and I can imagine some updates get missed. There's also the "save metaboxes" feature that complicates it further. The imperative logic with

previewWindow = createWindow();
writeInterstitial( previewWindow );
if ( needsSaving ) {
  await save();
}
previewWindow.document.location = previewLink;

should be much more reliable.

@tyxla
Copy link
Member

tyxla commented Nov 25, 2022

I think we can close this one in favor of #45235 which is pretty close to the finish line, cc @youknowriad.

In any case, this one is well behind trunk and will be a nightmare to rebase at this point.

@youknowriad
Copy link
Contributor Author

Yep. Thanks for your work on this @tyxla

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Element /packages/element [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Upgrade @wordpress/element to React 18 export React's useId hook