Automattic
React 19 compatibility
In WordPress 6.6, version 18.3 of the React library will be shipped, which will include warnings for deprecations and other changes that will ship in version 19 of React.
We should ensure compatibility with React 19.
propTypes and defaultProps will be removed for functions (though defaultProps will continue to be supported for class components). If propTypes is in use in a TypeScript file this is absolutely fine.
Function components that use defaultProps:
-
MapkitComponent
There are a considerable number of class and function components that use propTypes.
react-test-renderer/shallow will be removed, and instead can be installed directly from react-shallow-renderer
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-react-test-renderer-shallow
Related - react-test-renderer will be deprecated: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer
unmountComponentAtNode will be removed, root.unmount() can be used instead.
See plugins/jetpack/extensions/blocks/podcast-player/view.js
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-unmountcomponentatnode
ReactDOM.findDOMNode will be removed and can be replaced with DOM refs.
See plugins/jetpack/_inc/client/components/popover/index.jsx
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-reactdom-finddomnode
This is also covered in this issue: https://github.com/Automattic/jetpack/issues/37408
Typescript related:
The global JSX namespace has been removed in favor of React.JSX.
There are a few references of "jsx": "react-jsx" in tsconfig files in the monorepo.
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript
General ref: https://make.wordpress.org/core/2024/06/07/preparation-for-react-19-upgrade/
Something else we'll want to consider is switching to the new jsx transform if we're not already using it everywhere. Or, more specifically, whether we want to "polyfill" the react-jsx-runtime script being added to WordPress core in 6.6 for as long as we continue to support 6.5, or continue with letting the jsx runtime be included in our bundles until we drop 6.5.
As far as I could find, we're not affected by either dropping the react-shallow-renderer/shallow, nor the unmountComponentNode calls. So from my understanding, the major problem is the propType, because it's abundant in Jetpack code. It's not actually breaking because it's simply going to get ignored, but still that's not a good thing.
So we should prioritize the JSX transform changes and polyfill, and the findDomNode usage.
Marking this as done now, I believe I've covered any relevant React 19 compatibility issues.
So from my understanding, the major problem is the propType, because it's abundant in Jetpack code. It's not actually breaking because it's simply going to get ignored, but still that's not a good thing.
@zinigor I did want to follow up on this comment specifically though, to say that after looking into it more I believe it's not relevant for us - I commented here: https://github.com/Automattic/jetpack/issues/38271#issuecomment-2252497135