Component Splitting

When to split

Split a component when any of these are true:

• File exceeds ~150 lines
• Component owns unrelated concerns (e.g. data fetching + animation + layout)
• A chunk of state only affects a subtree — it belongs in a child, not the parent
• You find yourself scrolling to remember what a variable does
• The same logical block appears in two places

Do not split just to hit a line count. A 200-line component with one clear job is fine. A 60-line component doing three things should be split.

Extraction patterns

1. Isolate stateful logic into a leaf component

Moving state down prevents the parent from re-rendering when it changes.