coding · Cursor · free
This JSX is too big. Extract the right components — not the arbitrary ones. Framework: [React 19 / RN / Next 15] Constraints: [DESIGN SYSTEM / STORYBOOK / SERVER COMPONENTS] Rules for extraction (in order): 1. Extract when a subtree has its OWN name, its OWN state, or ships to Storybook 2. Do NOT extract just because "it's long" — cohesion beats line count 3. Do NOT extract if it turns 3 well named locals into 5 props being drilled 4. Server vs Client boundary — if it needs a hook, it's a client component; keep the boundary as low as possible Deliver: The refactored parent New component files with named exports + Props interfaces Props kept minimal — no "grab bag" props, no boolean flags that control 3 different things children slot for composition where it beats a prop Names that describe WHAT they render, not WHERE they live (OrderTotalRow, not CheckoutBottomLeftBox) A one line note per extraction: "extracted because " A list of subtrees I asked you to extract that you REFUSED to, with the reason
#refactoring #react #components