ecc-react-patterns

Use useState for single-component state, lift state to the nearest common ancestor for shared subtrees, Context for low-frequency cross-tree values like theme or auth, and an external store like Zustand for high-frequency updates shared across the tree.

Use TanStack Query or SWR for client-side caching and invalidation, or await fetch directly in React Server Components. Avoid useEffect plus fetch because it introduces race conditions, no cache, no retry, and no Suspense integration.

Apply React.memo only when a component re-renders frequently, its props are usually unchanged, and its render is measurably expensive. The default position is to not memoize; add useMemo or useCallback only when a profiler or dependency chain proves it matters.

No, you cannot import a Server Component from a Client Component file. Instead compose them by passing the Server Component as children or props into the Client Component, keeping the boundary serializable.

Derived state in useEffect adds an extra render cycle, can desynchronize from source data, and obscures data flow. Compute derived values directly during render, such as reducing cart items into a total inside the component body.

No, Next.js specifics like Route Handlers, Middleware, and Parallel Routes are explicitly out of scope. The skill covers router-agnostic React core patterns and points to Next.js documentation for framework-level concerns.