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

[edkimmel]

Looking to resolve the issues pointed out by https://github.com/necolas/react-native-web/issues/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: https://github.com/testing-library/react-testing-library/issues/1061

[codesandbox-ci[bot]]

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 bfab94779ee7ad75aa333ca25eee3881c2a9f8e3:

Sandbox	Source
react-native-web-examples	Configuration

[necolas]

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

[edkimmel]

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]

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:

1. https://github.com/necolas/react-native-web/issues/1506 - legacy context APIs
2. Uses of UNSAFE_componentWillMount and UNSAFE_componentWillReceiveProps

[edkimmel]

@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.

[edkimmel]

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

[JinbeiStudio]

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

[edkimmel]

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

@JinbeiStudio This is part of 0.19 https://github.com/necolas/react-native-web/pull/2377

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

[MalgoBlock]

Are there any plans for this to be released soon? Thank you!