react-best-practices

Optimize React bundle size by utilizing dynamic imports, conditional loading, and preloading where appropriate. This strategy ensures only necessary code loads initially, reducing initial bundle weight and speeding up page rendering.

Prevent excessive re-renders in Next.js client components by extracting memoized components, narrowing effect dependencies, and employing transitions for non-urgent updates. This minimizes unnecessary render cycles during state changes.

Yes, the approach supports Orval-generated React Query hooks for data fetching efficiency. By preferring these hooks and avoiding RSC fetch in client components, you leverage built-in caching and deduplication for optimized data flow.

Yes, you can use React Compiler-assisted memoization alongside Orval and React Query. This automates performance optimization guidelines for refactoring components, handling memoization automatically without manual dependency array management.

Optimize a slow Next.js page by applying bundle optimization, data fetching efficiency, and re-render optimizations across client and server components. This structured set of best practices targets bottlenecks to deliver faster user experiences.