Upgrade React to 19, additional major dependency updates (Primer, TanStack, tRPC) #412

Current State

Migration Steps

1. Upgrade React to v19

npm install react@19 react-dom@19
npm install -D @types/react@19 @types/react-dom@19

Breaking Changes:

• useFormState is deprecated in favor of useActionState (not used in this codebase)
• useFormStatus now includes additional keys (data, method, action)
• See https://react.dev/blog/2024/04/25/react-19-upgrade-guide

Impact: Low - this codebase does not use useFormState or useFormStatus

2. Upgrade styled-components to v6

npm install styled-components@6
npm uninstall @types/styled-components # Types are bundled in v6

Breaking Changes:

• Improved TypeScript support (types now bundled)
• Some internal API changes
• See https://styled-components.com/releases

Impact: Low - mostly internal changes

3. Upgrade @tanstack/react-query to v5

Run codemod first:

npx @tanstack/react-query-codemod@latest v5/all src/

Then install:

npm install @tanstack/react-query@5

Breaking Changes:

• cacheTime → gcTime
• useErrorBoundary → throwOnError
• isLoading → isPending for mutations
• status: 'loading' → status: 'pending'
• Default staleTime is now 0
• See https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5

Files to review after codemod:

• src/providers/TRPCProvider.tsx
• Any files using tRPC queries/mutations

4. Upgrade @trpc to v11

Run codemod first:

npx @trpc/codemod@latest v11 src/

Then install:

npm install @trpc/client@11 @trpc/react-query@11 @trpc/server@11

Breaking Changes:

• New initialization API
• httpBatchLink changes
• React Query integration updated for v5
• See https://trpc.io/docs/migrate-from-v10-to-v11

Files to review after codemod:

• src/server/trpc.ts - tRPC initialization
• src/server/routers/ - Router definitions
• src/app/api/trpc/[trpc]/route.tsx - tRPC route handler
• src/utils/trpc.ts - tRPC client

5. Upgrade @primer/react to v38

npm install @primer/react@38 @primer/octicons-react@latest

Breaking Changes:

• Component API changes
• Theme/color system updates
• Some components moved from drafts to main export (or vice versa)
• See https://github.com/primer/react/blob/main/CHANGELOG.md
• See Primer React v37 Release
• See Primer React v38 Release
  • Removed dependency on styled-components, so project needs to adapt to new styling approach

    We’ve removed our dependency on the end-of-life library styled-components. This means some component styling will need to change:

    • The sx prop is no longer supported. You can style components by providing a className and using CSS Modules.
    • Props from styled-system are no longer available.
    • Support for theming in JavaScript has been removed.

Files to review:

• src/app/page.tsx
• src/app/[organizationId]/page.tsx
• src/app/[organizationId]/forks/[forkId]/page.tsx
• src/app/not-found.tsx
• src/app/components/dialog/*.tsx
• src/app/components/header/*.tsx
• src/app/components/loading/Loading.tsx
• src/app/components/search/*.tsx

Note: We already migrated from internal lib-esm paths to public export paths (@primer/react and @primer/react/drafts) as part of the Next.js 16 upgrade (TODO: link PR once raised externally), which should reduce the migration effort.

Post-Upgrade Tasks

1. Enable Turbopack for builds - After upgrading @primer/react to v38, test if Turbopack works and remove the --webpack flag from the build script
2. Run full test suite - Verify all tests pass
3. Manual testing - Test the application end-to-end

Acceptance Criteria

• React upgraded to v19
• styled-components upgraded to v6
• @tanstack/react-query upgraded to v5
• @trpc packages upgraded to v11
• @primer/react upgraded to v38
• All tests pass
• Build succeeds (ideally with Turbopack)
• Application functions correctly in development and production

References

• https://react.dev/blog/2024/04/25/react-19-upgrade-guide
• https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5
• https://trpc.io/docs/migrate-from-v10-to-v11
• https://github.com/primer/react/blob/main/CHANGELOG.md
• https://styled-components.com/releases