# Component Quality > Improve React component design — split Container/Presentational, add useEffect cleanup, extract custom hooks, apply cva + cn() consistently, decide extraction with explicit criteria. Use when a pattern repeats 2+ times, a file exceeds 500 LOC, or PR review flags component complexity. Not for non-component code changes (use code-refactoring) or extraction into the shared component library (use design-system-construction). - Skill: `jaykim88/component-quality` (Agent Skill) - Install (CLI): `npx skillmds@latest add jaykim88/component-quality` - Raw SKILL.md: https://api.skillmd.com/api/skills/jaykim88/component-quality/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: JayKim88 (https://skillmd.com/u/jaykim88) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/jaykim88/component-quality --- # Component Quality ## Purpose Apply component design principles to maximize reusability and testability. Avoid both extremes: premature abstraction (one-off "reusable" components) and copy-paste blindness. **Universal** — separating logic from presentation, effect cleanup, extraction criteria, typed variant systems, and composition over wrapper proliferation apply to any component-based framework. The default Procedure illustrates them with the React + shadcn/ui idiom (cva, `cn()`, Radix `Slot`, hooks); the Other stacks section maps each concept to Vue / Svelte / Angular equivalents. ## Procedure 1. **Separate logic from presentation** - Pull data fetching, state, and handlers out of the render path — the modern vehicle is a custom hook (step 4), not a wrapper component - The classic Container/Presentational *split* earns its keep only when one presentational shell must serve multiple data sources; otherwise a hook is lighter - Either way the goal is the same: the rendering piece is a pure function of props, trivially testable in Storybook 2. **Place Error Boundaries strategically** - One at the page section level (not per-component, not just at root) - Wrap third-party widgets that can fail without bringing down the page - Fallback UI offers a recovery path (reload section, go home) - This skill decides *where* boundaries sit in the component tree; the fallback's loading/error/empty UI states belong to `async-ux-states` 3. **Audit `useEffect` — first "does it need to exist?", then cleanup** - Find every effect and check each *(search — see Implementation)*. Many effects shouldn't exist at all ("You Might Not Need an Effect"): - Deriving / transforming data for render → compute during render, don't effect-and-store - Responding to a user event → put the logic in the event handler, not an effect - Fetching that belongs server-side → move to a Server Component / route loader / query library - For the effects that *do* belong, three patterns REQUIRE cleanup (missing cleanup = memory leak): - Timer (`setTimeout`, `setInterval`) - Event listener (`addEventListener`) - Subscription (Supabase realtime, WebSocket, custom event bus) 4. **Extract custom hooks** - Same `useState` + `useEffect` pattern in 2+ components → extract to `useX` - Or: even one occurrence is worth extracting if it has test isolation value (e.g., complex state transitions) 5. **Apply a typed variant system** - Use a typed variant system for components with 3+ visual variants (a conditional class chain > 2 is the signal to switch) - Merge consumer overrides left-to-right instead of string-concatenating classes — concatenation silently breaks on duplicate utilities *(cva + `cn()` — see Implementation)* 6. **Prefer composition (children / slots) over deep prop chains** - Pass JSX as `children` (or named slots) instead of threading props down many levels — cuts prop drilling, and a component that holds state but renders `children` from above re-renders itself *without* re-rendering those children (same element reference). Composition is the first tool against drilling AND re-renders, before reaching for context or memo. - shadcn/Radix `asChild` + ``: when a wrapper only adds styles/behavior to one child, accept `asChild` and forward className/refs/props to the consumer's child — avoids `` / `` / `` proliferation. Pattern: `` renders as `` with button styles. 7. **Decide extraction with explicit criteria** **Candidates** (OR — any one warrants review): - Same/similar JSX appears in 2+ places - File > 500 LOC with multiple concerns - Section marker comments like `{/* Modal */}` `{/* Divider */}` **Execute extraction** (AND — all must hold): - ① Cleanly expressible as props (no state coupling) - ② Readability improves after extraction - → Otherwise: keep inline + add a comment explaining the decision 8. **Write hook tests** - Test hooks' state transitions, not implementation details *(`renderHook` — see Implementation)* ## Anti-patterns | ❌ Anti-pattern | ✅ Correct | |---|---| | `useEffect(() => setInterval(fn, 1000), [])` (no cleanup) | `useEffect(() => { const id = setInterval(...); return () => clearInterval(id) }, [])` | | `
`, ``, `` (wrapper proliferation) | One `