Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to React v19 #1113

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

Upgrade to React v19 #1113

wants to merge 8 commits into from

Conversation

meissadia
Copy link
Contributor

@meissadia meissadia commented Jan 21, 2025

Closes #1104

Blockers / TODO

  • Address TS linting errors

Changes

Notes

  • I have reviewed snapshot test failures and they seem to be acceptable
    • Fixed: <FormButtonGroup/> missing flex class that was causing unexpected spacing issue. I accidentally removed it during this upgrade and snapshot testing caught it!
    • Reviewed: Snapshots are out of date with logic showing/hiding of navbar based on user being signed-in/out
    • Reviewed: USA flag sometimes renders in snapshots as blurry but looks clear in the actual app
    • Reviewed: Field level alert content now wraps differently due to 670px width restriction

Next steps

  • Check-in with other teams using design-system-react to see if they can also upgrade to React v19 (the DSR upgrade is not backwards compatible). If they can't, we can move forward by continuing to maintain and utilize the DSR's upgrade-to-react-19 branch.

How to test this PR

  1. yarn && yarn test:e2e --headless

Steps taken to upgrade to React v19

  1. npx react-codemod update-react-imports
    1. Error: did not recognize object of type "TSSatisfiesExpression" while attempting to process the following files, but none seem to have any codemods that need to be applied.
    • src/api/requests/submitUserProfileFi.ts
    • src/api/requests/submitUpdateFinancialProfile.ts
    • src/components/CommonLinks.tsx
  2. yarn add --exact react@^19.0.0 react-dom@^19.0.0
  3. yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
    • If the above fails to update versions, manually update package.json
  4. npx codemod@latest react/19/migration-recipe
    • No changes
  5. npx types-react-codemod@latest preset-19 ./
    • Lots of updates to import type JSX
    • Our linter automatically removes these updates as "unecessary" ex. ReactElement<any> => ReactElement
  6. Manually applied: useRef requires an argument
    1. https://react.dev/blog/2024/04/25/react-19-upgrade-guide#useref-requires-argument
  7. Remove deprecated usage of FunctionalComponent.defaultProps
  8. Upgrade DSR to React v19 and Storybook v8

@meissadia meissadia force-pushed the 1104-upgrade-to-react-19 branch from b45dc1c to 9e6c88d Compare January 24, 2025 19:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Explore] Upgrade to React v19
1 participant