component-purity

Files (1)

• SKILL.md

SKILL.md (first lines)

# React component purity

## When to use

- You suspect property drilling (props passed through 2+ levels)
- Business logic is in component instead of hook
- `useEffect` with domain logic is inside component
- `useState` for domain data is inside component
- Component does too many things at once

## Core rule

React component = **pure view**:

- renders JSX based on props and hook values,
- passes handlers from its hooks to UI elements,
- does not contain computational logic, conditional business logic, or side effects.

## Verification procedure

1. Open component file.
2. Check each `useState` - does it store domain data? If yes -> move to hook.
3. Check each `useEffect` - is it in component? If yes -> move to hook.
4. Check for calculations/filters/data transforms -> move to hook.
5. Check props chain: does any prop pass through 2+ components without use -> property drilling.
6. Check whether handlers are defined inline in JSX -> move to hook.

## Remediation patterns

### Logic in component -> hook

```tsx
// [BAD] ERROR
function RecordingList({ recordings }) {
  const filtered = recordings.filter((r) => r.active); // logic
  const [selected, setSelected] = useState(null); // domain state
  useEffect(() => {
    fetchData();
  }, []); // effect
  return <List items={filtered} />;
}

// [OK] CORRECT
function RecordingList() {
  const { recordings, selected, handleSelect } = useRecordingList();
  return (
    <List items={recordings} selected={selected} onSelect={handleSelect} />
  );
}
```

### Property drilling -> useReducer + context

```tsx
// [BAD] prop `onSave` passed through 3 levels
<WizardRoot onSave={handleSave}>
  <WizardStep onSave={handleSave}>
    {" "}
    // does not use it, only forwards
    <WizardForm onSave={handleSave} /> // uses it
  </WizardStep>
</WizardRoot>;

// [OK] useReducer in domain hook + context
const { dispatch } = useWizardContext(); // directly in WizardForm
```

## Responsibility split

| Layer         | File                         | Contains                          |
| ------------- | ---------------------------- | --------------------------------- |
| Component     | `components/MyComponent.tsx` | JSX, hook calls                   |
| Domain hook   | `hooks/useMyDomain.ts`       | state, effects, logic, React Query |
| API           | `api/myDomain.api.ts`        | React Query query definitions     |
| Model         | `model/myDomain.model.ts`    | types, interfaces, constants      |

## Checklist

- [ ] No `useState` for domain data in component (UI state like `isOpen` for local modal is OK)
- [ ] No `useEffect` in component
- [ ] No calculations/data transformations in JSX or before `return`
- [ ] All handlers come from hook
- [ ] No property drilling through 2+ levels

From ArkadiuszSieracki/mastermind-agentic-sdlc-vscode-copilot, Apache-2.0.

More from ArkadiuszSieracki/mastermind-agentic-sdlc-vscode-copilot