react-compiler

[chalabi2]

Improve Performance & Build Times with React Compiler, Vite Migration, and Tailwind v4

Summary

We should leverage the React Compiler to automatically optimize our React code by using useMemo, useCallback, and React.memo where appropriate. This will enhance performance by ensuring hooks, functions, and data are properly memoized, reducing unnecessary re-renders.

Additionally, we should consider migrating to Vite instead of upgrading to Next.js 15 (react-compiler is only compatible with nextJs 15), as we are not utilizing Next.js server functions or full-stack capabilities. Vite will provide faster build times and better routing, allowing us to integrate TanStack Router and TanStack Start for improved routing management.

While making these updates, we should also upgrade to Tailwind v4 to take advantage of its latest optimizations and features.

Proposed Changes

1. Enable the React Compiler to optimize our React code automatically.
2. Migrate from Next.js to Vite for better performance and DX.
   • Faster build times.
   • Improved routing with TanStack Router & TanStack Start.
3. Upgrade Tailwind to v4 for enhanced styling capabilities.

Benefits

✅ Improved app performance via automatic memoization.
✅ Faster builds and hot reload times with Vite.
✅ Cleaner, more efficient routing with TanStack Router.
✅ Future-proof styling with Tailwind v4.

Next Steps

• Assess compatibility with Vite and identify potential migration challenges.
• Plan the migration from Next.js to Vite.
• Enable the React Compiler and test for potential issues.
• Upgrade Tailwind to v4 and refactor styles as needed.