React & Next.js Best Practices

Goal: Build high-performance, maintainable, and accessible React applications using modern patterns (React 19+, Next.js App Router).

1. Architecture & Rendering

• App Router First: Use Next.js App Router (app/) for all new projects.
• Server Components (RSC): Default to Server Components. Only add 'use client' when interactivity (state, hooks, event listeners) is strictly needed.
• Suspense & Streaming: Use <Suspense> boundaries to stream UI parts that depend on slow data.
• Data Fetching: Fetch data in Server Components directly (async/await components). Avoid useEffect for data fetching.

2. Component Patterns

• Composition: Use children prop to tackle prop drilling.
• Atomic Design: Organize components by atomicity (though feature-based folder structure is preferred for scale).
• Custom Hooks: Extract complex logic into useHookName.
• Props: Use strict TypeScript interfaces for props. Avoid any.

3. State Management