React 19 compatibility

[coder-karen]

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.

The propTypes issue is here (now closed): #38271

A fix for defaultProps was made #38274, but another instance still needs fixing: Warning: Connect(SettingsForm): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead. (from the Jetpack settings page, ref p1721282023991279-slack-CDLH4C1UZ).

Done in #38539

---

react-test-renderer/shallow will be removed, and instead can be installed directly from react-shallow-renderer. Related - react-test-renderer will be deprecated.

Done in #38753

---

unmountComponentAtNode will be removed, root.unmount() can be used instead.

Done in #38618

---

ReactDOM.findDOMNode will be removed and can be replaced with DOM refs.

Done in #37408

---

Typescript related:

The global JSX namespace has been removed in favor of React.JSX.

Done in #38585

---

JSX transform / polyfill:

Done in #38428

---

Additionally, in React 18 importing createRoot from react-dom was deprecated.

Done in #38495

---

Also, in React 19 ReactDOM.render will be removed and we'll need to be using ReactDOM.createRoot:

Done in #38644

---

Typescript related, returning anything else from a ref callback will now be rejected by TypeScript.

Done in #38761

---

Typescript and React related - useRef now requires an argument.

Done in #38763

---

Error generation with javascript:url usage

Done in #38780

Tasks

Beta Give feedback

1. JSX Transform: React compatibility - Add polyfill to prevent issues on sites running WP 6.5.5 or lower #38424
   General [Type] Janitorial +2
   
2. React compatibility: Use new createRoot API #38480
   [Type] Janitorial +1
   
3. React 19 compatibility: removing propTypes #38271
   [Type] Janitorial +1
   
4. React-dom findDOMNode is being removed in React 19 #37408
   [Focus] Compatibility [Platform] Atomic [Platform] Simple [Plugin] Jetpack [Pri] Normal [Type] Bug [Type] Janitorial +7
   
5. React 19 Compatibility: Resolve Connect(SettingsForm) defaultProps warning #38539
   [Type] Janitorial +1
   
6. React 19 Compatibility: Global JSX namespace removal #38566
   +0
   
7. React 19 Compatibility: replace usages of unmountComponentAtNode with root.unmount #38618
   [Type] Janitorial +1
   
8. React 19 Compatibility: use ReactDOM.createRoot instead of ReactDOM.render #38644
   General [Type] Janitorial +2
   
9. React compatibility: Remove react-test-renderer #38753
   General [Type] Janitorial +2
   
10. React Compatibility: Remove returning anything else from a ref callback #38761
    [Type] Janitorial +1
    
11. React Compatibility: useRef requires an argument #38763
    [Type] Janitorial +1
    
12. React compatibility: Clean up javascript: url usage #38780
    [Type] Janitorial +1
    

General ref: https://make.wordpress.org/core/2024/06/07/preparation-for-react-19-upgrade/

[anomiex]

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.

[zinigor]

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.

[coder-karen]

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: #38271 (comment)

[zinigor]

I can see how I mixed up the two now, thank you!