upgrade to react@19

[windsornguyen]

References

• Linear: N/A

Changes

• Upgraded to React 19 (now stable)
  • We can now benefit from the React 19 compiler!
• Upgraded to Next 15
• Upgraded to Auth0 v4 (Next 15 is incompatible with Auth0 v3)
• Optimized re-rendering TabbedMenu and its children

Short version: Instead of reloading the entire dashboard page to updated user settings, we now only re-render the necessary components that changed, e.g. semester bin labels, tabbed menu labels, and recursive dropdowns.

Long version: Before, we would reload the entire page (and thus the entire DOM tree) to force re-render components dependent on the user settings component. This was because Canvas.tsx did not have access to UserSettings/SettingsModal since that component was in the Navbar component.

Now, we use a Zustand store to keep track of academicPlan and the updateRequirements function in the user slice. This allows all components throughout the app to access a singular source of truth, namely whatever data is currently available in the user slice.

Since academicPlan is tracked by the store, it refreshes without needing to re-render Canvas. TabbedMenu takes in academicPlan as a prop; therefore, TabbedMenu and all of its children will re-render each time academicPlan changes, which occurs when the user changes their major, class year, etc.

Note: It still takes some time to fetch the updated data, so there is still a small delay between saving the user settings and the new settings being rendered. Nonetheless, the rendering logic for Canvas and its components is now a bit tidier and more "proper" in the sense that we no longer redundantly force re-render the entire DOM tree.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
plan	❌ Failed (Inspect)			Dec 7, 2024 7:15am

[windsornguyen]

Small thing: MUI Joy v5 is not fully compatible w/ React 19. Specifically, it seems the Autocomplete component does not follow React 19 rules, so you'll see this error:

Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.

You can reproduce this by changing your major to something else (you'll get an error in dev mode). It does not crash the app in dev nor in build.

To emphasize, this is an issue with MUI Joy, not us. Unfortunately, its development is currently on hold. Their last update was five months ago.

We can either:

1. Ignore it and be slightly annoyed during dev in localhost
2. Refactor the Autocomplete components to use vanilla MUI, Evergreen UI, or ShadCN

[windsornguyen]

On a related note, React 19 brought along some deprecations. One such deprecation is that forwardRef is no longer a thing. We use this across like 18 files.

You can see how we would refactor it here.

Not a pressing issue, but it's something we'll have to address at some point down the line. Plus, it'll be a good exercise for us to understand what these refs are actually doing. Most of the affected components were imported from external libraries but designed to be modified by the user.