feat: Upgrade to React 19 #3088

aligg · 2024-12-23T18:36:05Z

Summary

Ran through https://react.dev/blog/2024/04/25/react-19-upgrade-guide using codemod
Manually updated ref typing to reflect react 19 requirements

Related PR

#3045
I know @sbolel has a PR up in progress - feel free to defer to that one. I had some time this morning to get this working though.

How To Test

Ran through all the unit tests
Ran storybook locally and clicked through components

Screenshots (optional)

N/A

aligg · 2024-12-23T18:47:03Z

package.json

    "stylelint-config-css-modules": "^4.4.0",
-    "stylelint-config-prettier": "^9.0.5",


ℹ️ all style-related rules have been deprecated as of stylelint 15 so this plugin is no longer necessary. Additionally, the older version has some conflicts with the other dependencies we need to update.

sbolel · 2024-12-23T19:35:58Z

This is awesome!

aligg · 2025-01-13T18:56:56Z

@brandonlenz are you the best person to review this PR?

acouch · 2025-01-24T18:57:23Z

Can confirm this works with React 19. You can see our upgrade PR here: HHS/simpler-grants-gov#3515 . Would be great to get this pulled in 🚀

sbolel

LGTM, though it like the fonts changed a bit in the snapshot tests: https://happo.io/a/371/p/453/compare/931d2456d1b97c73a54aa598f8bfd7ba1fa50531/58f3089739ac5ee415c11cfbe179daad7a625971

sbolel

Excellent work @aligg. Looks like the diffs are gone now that you rebased. LGTM.

aligg · 2025-03-11T16:38:27Z

@crwallace - are you the current active maintainer (Just found your name in the docs). @sbolel and @acouch have thoroughly tested this PR and merging and releasing this upgrade will unblock other codebases to upgrade to react 19. Would you or someone you delegate have time to review this PR? Thank you!

cc @brandonlenz @mdmower-csnw b/c I saw you reviewing PRs recently as well! (conscientious staffing could very well have shifted recently as well - if it helps, I know @sbolel would be willing to receive write access and serve as a reviewer, but not sure the protocol)

jpandersen87 · 2025-03-11T18:15:18Z

Do we have confirmation that this is backwards compatible, just to ensure this isn't a breaking change (feat!) vs not? Otherwise, throwing my support in to get this through.

ajfarkas

This is a great start. I think the other few updates are important to include here, and I'm interested in others' take on the form types.

package-lock.json

package.json

src/components/Tooltip/Tooltip.tsx

ajfarkas · 2025-03-11T19:54:17Z

src/components/forms/Radio/Radio.tsx

-    | React.RefObject<HTMLInputElement>
-    | null
-    | undefined
+  inputRef?: React.RefObject<HTMLInputElement>


🎯 suggestion: ‏include all prop types for compatibility reasons

I agree with what's here as best practice, but I have concerns about this becoming a breaking change for someone.
What do you think of deprecating the other types before we remove them in a future release?

The choice for this should be consistent across RangeInput, Select, TextInput, and Textarea

Updated via @jpandersen87

* LegacyInputRef and LegacyReactElement created * LegacyReactElement relies on user's React.Ref and React.LegacyRef in order to provide compatibility across types versions * unpin react and react-dom types resolution * updated all react-related dev dependencies * removed deprecated react-test-renderer and fixed affected unit tests

* use JSX.Element as functional component returns for React 16-19 compatibility * add react and react-dom types to peer dependencies so that library types properly reflect user's version

Optimize react 19 migration types to custom legacy types

* fix storybook (likely due to yarn v1) by updating to latest * update storybook-related plugin packages * update testing-library/react * remove unused storybook/addons * update happo dependencies * migrate pagination stories to be compatible

ajfarkas

This is great. There's a conflict or two on yarn.lock that I can't resolve manually. Do you mind taking a look on your side?
We've updated eslint & friends, so you'll see those conflicts in package.json, and we had to add "@typescript-eslint/utils": "8.26.1" to the resolutions.
The other conflicts are from us removing inline eslint rules from a few files.

Let me know if you have any questions about this. I'm confident we can merge this once the conflicts are resolved.

ajfarkas · 2025-03-14T15:48:20Z

src/types/legacyInputRef.ts

👏 praise: ‏Thank you, this is exactly what we need!

ajfarkas · 2025-03-14T17:35:44Z

package.json

@@ -121,17 +122,15 @@
    "husky": "^9.0.10",
    "jsdom": "^24.0.0",
    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",


👏 praise: ‏Thank you for this cleanup!

ajfarkas · 2025-03-14T17:44:16Z

src/components/Identifier/IdentifierGov/__snapshots__/IdentifierGov.test.tsx.snap

@@ -2,20 +2,20 @@

 exports[`IdentifierGov component > renders consistently in Spanish 1`] = `
 <section
-  className="usa-identifier__section usa-identifier__section--usagov"


👏 praise: ‏Good catch!

For context: This is a natural side effect of updating the snapshot-based tests to use the actual DOM object from the render rather than the prior .toJSON()-based way after removing react-test-renderer.

jpandersen87 · 2025-03-14T18:45:09Z

This is great. There's a conflict or two on yarn.lock that I can't resolve manually. Do you mind taking a look on your side? We've updated eslint & friends, so you'll see those conflicts in package.json, and we had to add "@typescript-eslint/utils": "8.26.1" to the resolutions. The other conflicts are from us removing inline eslint rules from a few files.

Let me know if you have any questions about this. I'm confident we can merge this once the conflicts are resolved.

Just a heads up: there's an issue with the project's yarn v1 resolving dependencies improperly for the commit you reviewed (yarn v1 is known to be buggy and I have a PR to update it to the latest dependabot-supported version at #2878 ) which breaks storybook (and thus Happo). @aligg will be merging some updates soon that will update the storybook version which fixes the issue (updating storybook within this PR scope is the safer and more beneficial route since I have the PR for yarn specifically).

Fix storybook via storybook dependency updates

ajfarkas · 2025-03-14T20:37:36Z

Great, I'll double check yarn.lock (35% size reduction is fantastic, but due diligence...), and likely merge it on Monday.

jpandersen87 · 2025-03-14T21:38:04Z

Storybook should be fixed now. There is a future merge pending to fix the new small conflict that came up, if not handled via maintainer manually themselves before.

Trusswork Main Branch Conflicts Fix

* remove dotenv line from happo config as project does not use dotnev and this line now causes an error due to dotenv no longer existing in dependency tree

Fix happo config

aligg · 2025-03-17T16:36:23Z

This should be ready for another round of review. Want to shout-out @jpandersen87 for doing the heavy lifting to get this PR over the line while I was on PTO last week 👑

Main branch catchup

ajfarkas

LGTM!

aligg added 4 commits December 23, 2024 09:57

migrate to react 19

13dc2ad

format

7da47b0

denote 19 in package file

d1ba82b

update jsx references

58f3089

aligg requested review from a team as code owners December 23, 2024 18:36

aligg commented Dec 23, 2024

View reviewed changes

sbolel mentioned this pull request Dec 23, 2024

feat: [WIP] upgrade to React 19: BREAKING CHANGE #3083

Closed

6 tasks

fzhao99 mentioned this pull request Feb 25, 2025

Upgrade to Next 15 CDCgov/dibbs-query-connector#375

Open

sbolel approved these changes Mar 1, 2025

View reviewed changes

Merge branch 'main' into aligg/19

bea813a

sbolel approved these changes Mar 11, 2025

View reviewed changes

ajfarkas requested changes Mar 11, 2025

View reviewed changes

jpandersen87 and others added 11 commits March 12, 2025 21:32

merge

205d97f

merge fixes

d55ec97

fix snapshots

c45095a

use JSX.Element as functional component returns

8349f31

* use JSX.Element as functional component returns for React 16-19 compatibility * add react and react-dom types to peer dependencies so that library types properly reflect user's version

with typo

5746c7a

remove lock file package.json

4b821bd

Merge branch 'aligg/19' into jpandersen87/19

5cdb9ce

fix accidental newline

edcbf09

Merge pull request #1 from jpandersen87/jpandersen87/19

d42888b

Optimize react 19 migration types to custom legacy types

Merge branch 'main' into aligg/19

ad25431

aligg requested a review from ajfarkas March 13, 2025 20:59

update dependencies

0f71cc5

* fix storybook (likely due to yarn v1) by updating to latest * update storybook-related plugin packages * update testing-library/react * remove unused storybook/addons * update happo dependencies * migrate pagination stories to be compatible

ajfarkas reviewed Mar 14, 2025

View reviewed changes

Merge branch 'main' into jpandersen87/19

cb0e84e

Merge pull request #2 from jpandersen87/jpandersen87/19

940cee6

Fix storybook via storybook dependency updates

Merge branch 'main' into jpandersen87/19

5cceb3d

aligg and others added 3 commits March 14, 2025 17:48

Merge pull request #3 from jpandersen87/jpandersen87/19

f6a6781

Trusswork Main Branch Conflicts Fix

fix happo

01562db

* remove dotenv line from happo config as project does not use dotnev and this line now causes an error due to dotenv no longer existing in dependency tree

Merge pull request #4 from jpandersen87/jpandersen87/19

d209289

Fix happo config

aligg requested a review from ajfarkas March 14, 2025 22:51

jpandersen87 and others added 2 commits March 17, 2025 11:38

Merge branch 'main' into jpandersen87/19

f8e0067

Merge pull request #5 from jpandersen87/jpandersen87/19

ad67085

Main branch catchup

ajfarkas approved these changes Mar 17, 2025

View reviewed changes

ajfarkas merged commit 2ad0462 into trussworks:main Mar 17, 2025
7 checks passed

github-actions bot mentioned this pull request Mar 17, 2025

chore(main): release 9.2.0 #3095

Open

ajfarkas added a commit that referenced this pull request Mar 17, 2025

fix #3088 broken pre-commit tests

f77d101

ajfarkas mentioned this pull request Mar 17, 2025

chore: #3088 broken pre-commit tests #3104

Merged

ajfarkas added a commit that referenced this pull request Mar 18, 2025

chore: #3088 broken pre-commit tests (#3104)

6b6f8a8

ajfarkas mentioned this pull request Mar 20, 2025

[feat] Support React 19 #3045

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Upgrade to React 19 #3088

feat: Upgrade to React 19 #3088

aligg commented Dec 23, 2024

aligg Dec 23, 2024

sbolel commented Dec 23, 2024

aligg commented Jan 13, 2025

acouch commented Jan 24, 2025

sbolel left a comment •

edited

Loading

sbolel left a comment

aligg commented Mar 11, 2025 •

edited

Loading

jpandersen87 commented Mar 11, 2025

ajfarkas left a comment

ajfarkas Mar 11, 2025

ajfarkas Mar 11, 2025

aligg Mar 13, 2025

ajfarkas left a comment

ajfarkas Mar 14, 2025

ajfarkas Mar 14, 2025

ajfarkas Mar 14, 2025

jpandersen87 Mar 14, 2025

jpandersen87 commented Mar 14, 2025

ajfarkas commented Mar 14, 2025

jpandersen87 commented Mar 14, 2025

aligg commented Mar 17, 2025

ajfarkas left a comment

		"stylelint-config-css-modules": "^4.4.0",
		"stylelint-config-prettier": "^9.0.5",

feat: Upgrade to React 19 #3088

feat: Upgrade to React 19 #3088

Conversation

aligg commented Dec 23, 2024

Summary

Related PR

How To Test

Screenshots (optional)

Choose a reason for hiding this comment

sbolel commented Dec 23, 2024

aligg commented Jan 13, 2025

acouch commented Jan 24, 2025

sbolel left a comment • edited Loading

Choose a reason for hiding this comment

sbolel left a comment

Choose a reason for hiding this comment

aligg commented Mar 11, 2025 • edited Loading

jpandersen87 commented Mar 11, 2025

ajfarkas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajfarkas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jpandersen87 commented Mar 14, 2025

ajfarkas commented Mar 14, 2025

jpandersen87 commented Mar 14, 2025

aligg commented Mar 17, 2025

ajfarkas left a comment

Choose a reason for hiding this comment

sbolel left a comment •

edited

Loading

aligg commented Mar 11, 2025 •

edited

Loading