performance

Run vite-bundle-analyzer on the build output to find large dependencies, then apply route-level code splitting with React.lazy, use named imports from lodash-es instead of namespace imports, and set sideEffects to false in package.json for better tree shaking.

Replace per-record findMany calls inside loops with a single query using include to fetch related tasks and counts. For GraphQL resolvers, batch lookups with DataLoader so multiple parent IDs resolve in one database round trip.

Target LCP under 2.5 seconds, INP under 100 milliseconds, and CLS under 0.1, measured with Lighthouse and the web-vitals library. Preload hero images with fetchpriority high, defer non-critical work with useTransition, and reserve image dimensions to prevent layout shifts.

Leaks typically come from event listeners, intervals, or subscriptions created in useEffect without cleanup functions. Return a cleanup that removes listeners, clears timers, and unsubscribes, and verify with Chrome DevTools heap snapshot comparisons.

TanStack Query caches API responses in the browser with staleTime and gcTime for client-side state. Redis caches expensive database queries server-side with a TTL, which is appropriate for shared data like active project lists queried by many users.