React 19 migration

[andrew-ronaldson]

Background

React 19 has officially released and product teams are eager to utilize the new features available in this release. React 19 offers several new features and performance improvements that will help PatternFly stay up-to-date with the latest tools.
PF guidelines state that we will support the last two versions of react. This means PF6 must support both React 17 & 18. This impacts what features we can utilize based on the backwards compatibility. This initiative prioritizes non-breaking changes in PatternFly 6 to enable React 19. Following this effort the PatternFly React 19 enhancements Initiative is intended as the breaking change update that leverage more react features supported in react 18 & 19.

Goals

• The PatternFly React team will complete all non-breaking changes in order be compatible with React 19 (Sub issues).
• Set up a testing environment to determine if we can support react, 17, 18 and 19 until our next breaking change.

Considerations

PF guidelines state that we will support the last two versions of react. This means PF6 must support both React 17 & 18. This impacts what features we can utilize based on the backwards compatibility.

Research and references

React 19 source
React upgrade guide
PatternFly React 19 enhancements
React package

PF team of contacts

React: @thatblindgeye

[kmcfaul]

For ease of updating in extensions, making a basic checklist here of todos.

• Update peer dependencies to include v17, v18, and v19 for react & react-dom
• Update jsx compiler option in tsconfig.json to react-jsx
• Update eslint config to also extend plugin:react/jsx-runtime or turn off the rule react/react-in-jsx-scope
• Update code to account for the following:
  • useRef now requires an initial argument (for previously empty useRefs, null can be used)
  • directly referencing or accessing props in a ReactElement needs explicit typing. any can be used, or use props interface if the exact element type is known
  • use named imports from react package instead of importing the whole React namespace
  • remove any propTypes or defaultProps in FunctionComponents (defaultProps in class components is still supported)
  • remove any contextTypes or getChildContext
  • remove any string refs (use useRef or a ref callback)
  • replace ReactDOM.render with ReactDOM.createRoot, & ReactDOM.hydrate with ReactDOM.hydrateRoot
  • remove any usages of React.findDOMNode

For testing, locally bump to v19 for react, react-dom, @types/react, @types/react-dom (but don't commit).
The following prereleases of @patternfly contain react 19 enablement if any are needed to bump for testing:
"@patternfly/patternfly": "6.3.0-prerelease.9",
"@patternfly/react-charts": "8.3.0-prerelease.1",
"@patternfly/react-code-editor": "6.3.0-prerelease.1",
"@patternfly/react-core": "6.3.0-prerelease.1",
"@patternfly/react-docs": "7.3.0-prerelease.1",
"@patternfly/react-drag-drop": "6.3.0-prerelease.1",
"@patternfly/react-icons": "6.3.0-prerelease.1",
"@patternfly/react-styles": "6.3.0-prerelease.1",
"@patternfly/react-table": "6.3.0-prerelease.1",
"@patternfly/react-templates": "6.3.0-prerelease.1",
"@patternfly/react-tokens": "6.3.0-prerelease.1",

There is a version of docs-framework available that pulls in the above prereleases if needed - 6.9.11.
Ideally, you shouldn't have to pull in the docs-framework (as the docs build will still fail), and only need to build and verify with react 19 in the module build, or by pulling in the extension/project into the react-seed app with react 19.

Documentation build will fail due to react-ssr-prepass.
Finally, test that v18 still works.