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

[wrslatz]

Is your feature request related to a problem?

Current versions of React, Primer, TanStack, and tRPC are all outdated.

Describe the solution you'd like

When #409 merges and the project is updated to Next.js 16, these dependencies can then be updated.

Detailed migration plan

Current State

Package	Current Version	Target Version
React	18.3.1	19.x
React DOM	18.3.1	19.x
@primer/react	36.27.0	38.x
@primer/octicons-react	19.15.2	Latest
@tanstack/react-query	4.36.1	5.x
@trpc/client	10.45.3	11.x
@trpc/react-query	10.45.3	11.x
@trpc/server	10.45.3	11.x
styled-components	5.3.11	6.x

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

Describe alternatives you've considered

No response

Additional context

No response