Upgrade React to 18.3

[chiroptical]

Summary

DO NOT MERGE

This is currently blocked on a styled-components upgrade

According to https://react.dev/blog/2024/04/25/react-19-upgrade-guide, this was put in place to help people migrate to 19. It is supposed to add additional warnings for changes in 19.

Testing

First, I noticed some warnings in yarn build:prod but they do not change from main to this branch, e.g.

Before

yarn run v1.22.22
$ MAPLE_ENV=prod next build
   Linting and checking validity of types ...

./components/EditProfilePage/FollowersTab.tsx
45:6  Warning: React Hook useEffect has a missing dependency: 'setFollowerCount'. Either include it or remove the dependency array. If 'setFollowerCount' changes too often, find the parent component that defines it and wrap that definition in useCallback.  react-hooks/exhaustive-deps

./components/hearing/HearingSidebar.tsx
47:6  Warning: React Hook useCallback has missing dependencies: 'generalCourtNumber' and 'member.id'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
51:6  Warning: React Hook useEffect has missing dependencies: 'generalCourtNumber' and 'memberData'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
537:6  Warning: React Hook useCallback has missing dependencies: 'element.MemberCode' and 'generalCourtNumber'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
541:6  Warning: React Hook useEffect has missing dependencies: 'generalCourtNumber' and 'memberData'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps

./components/hearing/Transcriptions.tsx
156:6  Warning: React Hook useCallback has a missing dependency: 'handleTranscriptData'. Either include it or remove the dependency array. If 'handleTranscriptData' changes too often, find the parent component that defines it and wrap that definition in useCallback.  react-hooks/exhaustive-deps

./components/search/shared/SearchPage.tsx
95:9  Warning: The 'menuAttributes' logical expression could make the dependencies of useMemo Hook (at line 103) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'menuAttributes' in its own useMemo() Hook.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Failed to compile.

./functions/lib/email/helpers.ts:2:10
Type error: Module '"../notifications/emailTypes"' has no exported member 'BillDigest'.

  1 | import { Frequency } from "../auth/types"
> 2 | import { BillDigest } from "../notifications/emailTypes"
    |          ^
  3 |
  4 | export function addCounts() {
  5 |   let sum = 0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

After

# after 
yarn run v1.22.22
$ MAPLE_ENV=prod next build
   Linting and checking validity of types ...

./components/EditProfilePage/FollowersTab.tsx
45:6  Warning: React Hook useEffect has a missing dependency: 'setFollowerCount'. Either include it or remove the dependency array. If 'setFollowerCount' changes too often, find the parent component that defines it and wrap that definition in useCallback.  react-hooks/exhaustive-deps

./components/hearing/HearingSidebar.tsx
47:6  Warning: React Hook useCallback has missing dependencies: 'generalCourtNumber' and 'member.id'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
51:6  Warning: React Hook useEffect has missing dependencies: 'generalCourtNumber' and 'memberData'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
537:6  Warning: React Hook useCallback has missing dependencies: 'element.MemberCode' and 'generalCourtNumber'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps
541:6  Warning: React Hook useEffect has missing dependencies: 'generalCourtNumber' and 'memberData'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps

./components/hearing/Transcriptions.tsx
156:6  Warning: React Hook useCallback has a missing dependency: 'handleTranscriptData'. Either include it or remove the dependency array. If 'handleTranscriptData' changes too often, find the parent component that defines it and wrap that definition in useCallback.  react-hooks/exhaustive-deps

./components/search/shared/SearchPage.tsx
95:9  Warning: The 'menuAttributes' logical expression could make the dependencies of useMemo Hook (at line 103) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'menuAttributes' in its own useMemo() Hook.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Failed to compile.

./components/AboutPagesCard/AboutPagesCard.tsx:5:29
Type error: No overload matches this call.
  Overload 1 of 3, '(component: Comp<CardHeaderProps>): ThemedStyledFunction<Comp<CardHeaderProps>, any, {}, never>', gave the following error.
    Argument of type 'BsPrefixRefForwardingComponent<"div", CardHeaderProps>' is not assignable to parameter of type 'Comp<CardHeaderProps>'.
  Overload 2 of 3, '(component: AnyStyledComponent): ThemedStyledFunction<any, any, any, any>', gave the following error.
    Argument of type 'BsPrefixRefForwardingComponent<"div", CardHeaderProps>' is not assignable to parameter of type 'AnyStyledComponent'.
  Overload 3 of 3, '(component: keyof IntrinsicElements | ComponentType<any>): ThemedStyledFunction<keyof IntrinsicElements | ComponentType<any>, any, {}, never>', gave the following error.
    Argument of type 'BsPrefixRefForwardingComponent<"div", CardHeaderProps>' is not assignable to parameter of type 'keyof IntrinsicElements | ComponentType<any>'.

  3 | import { FC, PropsWithChildren } from "react"
  4 |
> 5 | const StyledHeader = styled(Card.Header)`
    |                             ^
  6 |   transform: translate(0);
  7 |
  8 |   &:first-child {

To additionally verify that no changes need to be made I figure I could try npx codemod@latest react/19/migration-recipe to see if nothing changes. It absolutely doesn't change anything!

Checklist

• On the frontend, I've made my strings translate-able.
• If I've added shared components, I've added a storybook story.
• I've made pages responsive and look good on mobile.
• If I've added new Firestore queries, I've added any new required indexes to firestore.indexes.json (Please do not only create indexes through the Firebase Web UI, even though the error messages may reccommend it - indexes created this way may be obliterated by subsequent deploys)

Screenshots

Add some screenshots highlighting your changes.

Known issues

If you've run against limitations or caveats, include them here. Include follow-up issues as well.

Steps to test/reproduce

For each feature or bug fix, create a step by step list for how a reviewer can test it out. E.g.:

1. Go to the home page
2. Click on a testimony
3. See that it's loaded with a loading spinner

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
maple-dev	Error			Nov 26, 2025 1:36am