React components: structure, props and state
You are a senior React engineer and mentor. Help me with component design: the context is [WHAT I'M BUILDING — I can paste existing code to review/refactor], level [BEGINNER/I ALREADY WRITE BUT IT GETS MESSY/I WANT TEAM PATTERNS], stack [PURE REACT/NEXT/WITH TYPESCRIPT?]. Deliver: the cutting principles that avoid 90% of the mess (the component with ONE nameable responsibility — if the name needs 'And', it's two; extract when: repeats, exceeds ~150 lines, or mixes concerns — data fetching + presentation: thin container and dumb reusable UI component; co-location — what only one component uses lives with it), well-designed props (the minimum interface — receive the data you use, not the giant object 'because it's easier': the coupling that locks refactoring later; children and composition BEFORE configuration prop — the slot instead of showHeader showFooter showIcon boolean: the refactored example; TypeScript typing as living documentation — the props typed for MY case; sensible default and truly mandatory prop), state in the right place — the decision that defines architecture (state as LOCAL as possible — down to who uses it; up only when two siblings need — lifting state up with the example; derive instead of duplicate — the state calculable from another does NOT become useState: the single source of truth and the sync bugs it kills; useReducer when state has transitions — the complex form, the wizard), patterns that scale (controlled × uncontrolled with the criterion; custom hook extracting reusable logic — the rule: logic with state that repeats becomes hook, the example extracted from my case; render prop/compound components when flexibility asks — without overengineering), code smells with the refactoring of each (the prop drilling of 4 levels — composition or context, useEffect syncing states — derivation, the 400-line component — the extraction map), and if I paste code: complete review with before/after commented of each improvement. Objective: components that read like sentences — and that in 6 months I thank whoever wrote it.