React 18 concurrent render functions / removal of findDOMNode / test updates #2330

edkimmel · 2022-07-06T20:58:12Z

Looking to resolve the issues pointed out by #1529

The breaking changes come from the deprecation / removal of findNodeHandle, which doesn't appear to be a strictly necessary change to support React 18. Let me know if I should revert those changes.

Bump React dependency to 18.
Remove uses of findNodeHandle. Remove direct uses of findDOMNode. Marked findNodeHandle as deprecated for uses outside of this library
- TouchableMixin has a new required function on the user - getTouchableNode - which returns the dom node of the touchable element.
- ScrollResponderMixin no longer has the imperative findNodeHandle fallback, the dom node must be provided by getScrollableNode
Support for concurrent mode in AppRegistry
- This required swapping to a callback ref on AppContainer as the callback parameter to the new render/hydrate calls was removed.
Using react testing library's render and act functions in tests
- Using the legacy render functions caused a React deprecation warning on every test
- Using the new render functions directly caused this warning: The current testing environment is not configured to support act(...) with vitest and React 18 testing-library/react-testing-library#1061

codesandbox-ci · 2022-07-06T20:59:12Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bfab947:

Sandbox	Source
react-native-web-examples	Configuration

necolas

Thanks! This looks pretty good

necolas · 2022-07-06T21:25:08Z

packages/react-native-web/src/exports/Touchable/index.js

+ *   getTouchableNode: function() {
+ *     return this.touchableRef.current
+ *   }


Where is this used / implemented?

Guidance from React is to remove findDOMNode and use React.Ref instead. The Touchable and ScrollResponder mixins don't render themselves, so they become dependent on the concrete component to capture the root to a ref and provide it.

I didn't see any uses of Touchable directly in this repository, so that seems to be only a user-facing breaking change. Nothing in this repository actually implements it.

ScrollResponderMixin was used by ScrollView, which already provided getScrollableNode. It appears that it would only be user components using ScrollResponderMixin that would have to be sure to implement getScrollableNode now.

I think after this is merged, it will also be a good time to remove those mixins as a legacy feature that will not carry forward with React 18 adoption.

packages/react-native-web/package.json

necolas · 2022-07-06T21:29:48Z

The unmountComponentAtNode export probably also needs rethinking for the new root API.

edkimmel · 2022-07-07T15:40:07Z

The unmountComponentAtNode export probably also needs rethinking for the new root API.

ReactDom does warn/error when that is called on a container used by createRoot. Someone using legacy mode is fine to call that method.

We may have to provide some method of communicating to the root created by the new createRoot / hydrateRoot calls though?

edkimmel · 2022-07-07T16:50:48Z

Does this mean we can use strict mode now? IIRC, that was one of the existing issues last time we looked into it.

Removing findDOMNode is a step towards react-native-web working under strict mode.

The other two I can think of are:

Remove all use of legacy context API #1506 - legacy context APIs
Uses of UNSAFE_componentWillMount and UNSAFE_componentWillReceiveProps

edkimmel · 2022-07-11T14:50:18Z

@necolas I pushed a small change + test to return an object containing an unmount method from runApplication. It hides whether we used react 17 or 18 render/hydrate methods and can be used to expose access to the new root object returned by react 18 methods.

* Support React 18 concurrency and constraints. * Add new render / hydrate functions. * Remove uses of findNodeHandle. * Expose ability to unmount an application once ran. Fix #1529 Close #2330

…t warnings

edkimmel · 2022-10-10T14:30:17Z

@necolas Should I close this PR? I just saw the commit on 0.19-dev referencing this PR.

JinbeiStudio · 2022-11-09T09:34:04Z

Do you know on which update this will be fixed ? Thank you !

edkimmel · 2022-11-23T18:20:48Z

Do you know on which update this will be fixed ? Thank you !

@JinbeiStudio This is part of 0.19 #2377

I don't know when that release is expected to go out.

* Support React 18 concurrency and constraints. * Add new render / hydrate functions. * Remove uses of findNodeHandle. * Expose ability to unmount an application once ran. Fix #1529 Close #2330

necolas reviewed Jul 6, 2022

View reviewed changes

necolas added this to the 0.20: React 18 milestone Jul 8, 2022

Albert-Gao mentioned this pull request Aug 22, 2022

[SDK46][Web] ReactDOM.render is no longer supported in React 18 expo/expo#18485

Closed

necolas added the has: pr Subject of a pull request label Aug 26, 2022

jaivinwylde mentioned this pull request Aug 30, 2022

Web animations break when StrictMode is enabled nandorojo/moti#224

Closed

parasharrajat mentioned this pull request Oct 6, 2022

[HOLD for payment 2024-04-25] [Tracking] [Performance] Enable the new Fabric architecture Expensify/App#8503

Closed

38 tasks

edkimmel added 6 commits October 7, 2022 15:54

New react render / hydrate functions with callback support.

cb19e24

Moving to react testing library render and act for react 18 concurren…

d9a2703

…t warnings

Only support react 18, not both 17 and 18

b4bd844

Do not bump version

68ce4c6

npm install

3c5a6fe

Expose ability to unmount an application once ran

bfab947

edkimmel force-pushed the react-18-deprecation-fixes branch from bf36608 to bfab947 Compare October 7, 2022 20:05

This comment was marked as off-topic.

Sign in to view

justinmann mentioned this pull request Jan 18, 2023

Update starter apps to fix image loading issues nandorojo/solito#303

Closed

necolas closed this in 9868738 Mar 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 18 concurrent render functions / removal of findDOMNode / test updates #2330

React 18 concurrent render functions / removal of findDOMNode / test updates #2330

edkimmel commented Jul 6, 2022

codesandbox-ci bot commented Jul 6, 2022 •

edited

Loading

necolas left a comment

necolas Jul 6, 2022

edkimmel Jul 7, 2022

necolas Jul 8, 2022

necolas commented Jul 6, 2022

edkimmel commented Jul 7, 2022

edkimmel commented Jul 7, 2022 •

edited

Loading

edkimmel commented Jul 11, 2022 •

edited

Loading

edkimmel commented Oct 10, 2022

JinbeiStudio commented Nov 9, 2022

edkimmel commented Nov 23, 2022

This comment was marked as off-topic.

React 18 concurrent render functions / removal of findDOMNode / test updates #2330

React 18 concurrent render functions / removal of findDOMNode / test updates #2330

Conversation

edkimmel commented Jul 6, 2022

codesandbox-ci bot commented Jul 6, 2022 • edited Loading

necolas left a comment

Choose a reason for hiding this comment

necolas Jul 6, 2022

Choose a reason for hiding this comment

edkimmel Jul 7, 2022

Choose a reason for hiding this comment

necolas Jul 8, 2022

Choose a reason for hiding this comment

necolas commented Jul 6, 2022

edkimmel commented Jul 7, 2022

edkimmel commented Jul 7, 2022 • edited Loading

edkimmel commented Jul 11, 2022 • edited Loading

edkimmel commented Oct 10, 2022

JinbeiStudio commented Nov 9, 2022

edkimmel commented Nov 23, 2022

This comment was marked as off-topic.

codesandbox-ci bot commented Jul 6, 2022 •

edited

Loading

edkimmel commented Jul 7, 2022 •

edited

Loading

edkimmel commented Jul 11, 2022 •

edited

Loading