react-best-practices

To optimize React rendering, apply memoization, functional state updates, lazy initialization, and stable refs to prevent stale closures and unnecessary renders. You can refactor component trees to improve UI responsiveness without changing user-facing behavior.

Fix data fetching waterfalls by reducing sequential fetches, parallelizing async work, and placing Suspense boundaries strategically. This approach ensures applications render faster and fetch data more efficiently.

Reduce React bundle size by preferring direct imports, using dynamic imports for conditional loading, and deferring third-party scripts. These loading optimizations directly improve application startup speed.

Yes, this approach applies to Next.js server actions and hydration behavior. It enforces React-specific best practices for concurrency, caching, and safe effect and state management in production apps.

Memoization should be avoided when it adds unnecessary overhead without preventing actual re-renders. The focus should be on identifying true performance anti-patterns and rendering inefficiencies rather than applying optimization blindly.