react-best-practices

Optimize React and Next.js performance by applying established best practices across eight priority categories, including server and client data fetching, bundle size reduction, and waterfall prevention. Using Orval-generated React Query hooks and React Compiler memoization enforces these performance targets.

Prevent unnecessary re-renders in Next.js client components by leveraging React Compiler memoization and switching to Orval-generated React Query hooks for data fetching. These tooling-aware practices enforce optimized rendering patterns automatically.

Refactor an existing React codebase to meet performance targets by aligning components with a 42-rule guideline covering waterfalls, bundle optimization, and rendering. Ensure React Compiler is enabled in next.config.ts and integrate checks into CI to flag regressions.

The React Compiler works with Next.js to handle memoization automatically, provided it is enabled in next.config.ts. This tooling-aware practice eliminates manual memoization and enforces optimized re-render patterns across client and server contexts.

Use Orval-generated React Query hooks in your React application when fetching data within Client Components to ensure optimal performance. This approach is part of a proven guideline that replaces ad-hoc fixes with structured, tooling-aware patterns.

Use established best practices instead of ad-hoc fixes for React performance to write faster, more maintainable UI. Consolidated optimization patterns provide consistent guidance across waterfalls, bundle size, and rendering, ensuring codebases meet performance targets reliably.