react-best-practices

Optimize React re-renders by choosing appropriate state placement and applying targeted memoization or callback strategies to prevent avoidable updates. This approach improves rendering performance by ensuring components only re-render when their actual dependencies change.

Prevent waterfall data fetching in Next.js by eliminating sequential awaits and enforcing Suspense boundaries for independent loading paths. This unlocks parallel data loading for dashboards and pages with both dependent and independent data requirements.

Default to React Server Components to reduce bundle size and client work, ensuring props passed to Client Components are JSON-serializable. This server-first architecture minimizes shipped JavaScript and improves initial page load performance.

Yes, you can use Suspense boundaries to unlock parallel loading for independent data paths within your pages. This prevents slow sequential rendering and ensures independent data streams load concurrently without blocking each other.

Review existing React code by analyzing re-render patterns, bundle inefficiencies, and client/server boundary mistakes in your data fetching strategy. This identifies high-impact fixes for slow pages caused by component structure and data flow issues.