Upgrade UI to React 19

[jwinters01]

Summary

Currently our UI runs on React 16, this is a fairly old version of React whose support ended 5 years ago. This version is also missing a lot of great new features and optimizations that can help improve performance, benchmarking capabilities, and developer experience. We should upgrade our UI in both argo-cd and argo-ui to version 19 so we can benefit from the latest features of the React ecosystem.

Motivation

The most immediate benefit of upgrading are for performance reasons. Versions 18 and 19 both make significant strides in improving rendering performance:

React 18

Performance Improvements:

• State update batching: Prevents unnecessary re-renders by batching state updates outside of event handlers.
• Transitions: Mark certain state updates as lower-priority so they don't block the main thread.

React 18 also provides new hooks like useSyncExternalStore to help with their crusade against every possible use case for useEffect.

React 19

The most immediate benefit of upgrading to v19 is the React Compiler. This is a new feature that can parse our React Applications and automatically memoize Components and Props that are rendered, which reduces unnecessary re-renders and makes renders faster.

Proposal

We should make these upgrades in the following order note: React 17 is generally considered an insignificant version bump, we shouldn't need to worry about any issues between 16 and 17:

1. Upgrade argo-ui to React 18 (Upgrade Guide here)
2. Upgrade argo-cd to React 18
3. Test Extensively to ensure no regressions
4. Upgrade Argo-ui to React 19 (guide here)
5. Upgrade Argo-cd to React 19

Note: UI Extensions assume the core ui to have React version 16, I believe (but have not verified) that if we upgrade the core UI past version 16, extensions will also have to upgrade or they will fail to run.

[crenshaw-dev]

@jwinters01 would it be possible to break down the 16->18 upgrade into smaller tasks? We've got some great UI folks who have been contributing recently and would probably be up for taking on some work.

[iemafzalhassan]

Hey @jwinters01 👋🏼

i would love to work on it.

[linghaoSu]

Hi @jwinters01, if there are specific tasks planned, I’d love to help and take on a few.

[jwinters01]

I believe the 16->18 upgrade will have to be done in one PR, but the work should not be too extensive. What will need to be done:

1. upgrade version via yarn add react@18 react-dom@18
2. upgrade types yarn add --dev @types/react@18 @types/react-dom@18
3. Refactor instances of ReactDOM.render to createRoot here (you can follow this section of the upgrade guide as a reference).

From there we should just test extensively to make sure it's all still working as expected. its possible some 3rd party libraries we use might also need to be upgraded, something to keep in mind if you're getting mysterious errors after upgrading.

also thinking on it more I think we will have to do this upgrade to argo-ui before upgrading argo-cd, because argo-ui has a peerDependency with argo-cd's version, it will likely complain if we upgrade the core repo ahead of it. I updated the original post to reflect that

[crenshaw-dev]

So maybe the division of labor could be that one person opens a draft PR in argo-ui to bump React and the other person creates a draft PR in argo-cd with a hard reference to that draft PR to start working on bumping React in argo-cd.