react-doctor: state & effects — derived state, cascading setState, effect-event handlers (41 warnings)

[bntvllnt]

Source

`npx react-doctor . --json` — 41 warnings tagged State & Effects.

Breakdown

Rule	Count
`no-derived-useState`	16
`no-cascading-set-state`	9
`no-effect-event-handler`	6
`prefer-use-effect-event`	5
`no-derived-state-effect`	3
`no-prop-callback-in-effect`	2

Why this matters

• `useState` derived from props → use direct value or `useMemo`. Avoids stale state + extra renders.
• `setState` cascading inside an effect after another `setState` → can be merged or restructured.
• Event handlers wrapped in `useEffect` with deps → modern `useEffectEvent` (React 19) avoids stale closures.
• Calling prop callbacks from inside an effect can trigger infinite update loops in consumers.

Sample

• `registry/default/faq/faq.tsx:17` — `no-derived-useState`
• `registry/default/tldr-section/tldr-section.tsx:16` — `no-cascading-set-state`
• `registry/default/slideshow/slideshow.tsx:182` (×3) — `prefer-use-effect-event`
• `registry/default/progress-card/progress-card.tsx:81` — `no-effect-event-handler`
• `components/storybook-embed/storybook-embed.tsx:112` — `no-derived-state-effect`
• `registry/default/tutorial-card/tutorial-card.tsx:87` — `no-effect-event-handler`

Acceptance criteria

• Replace derived `useState(prop)` patterns with direct prop usage or `useMemo`.
• Restructure cascading `setState` into single state object or reducer.
• Migrate event handlers in effects to `useEffectEvent` (React 19) where stable.
• Add regression tests for any state-loop fixes — see `@rules/proactive-thinking.md`.
• `pnpm doctor` reports 0 state-effect warnings.

Depends on

• react-doctor: React 19 migration — no-react19-deprecated-apis (439 warnings) #268 (React 19 migration — `useEffectEvent` requires React 19)

Run

```bash
pnpm doctor --explain registry/default/faq/faq.tsx:17
```