Detect, replace, and mechanically restrict direct React `useEffect` calls. Use when writing, refactoring, reviewing, or migrating React code that fetches, derives state, relays events, resets state, or synchronizes through effects. Preserve legitimate external-system synchronization inside reviewed domain hooks; do not use for unrelated React work or non-React effect systems.
70
85%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Treat direct effects as an external-synchronization escape hatch, not a default state-management tool.
useEffect.Prefer, in order:
useSyncExternalStoreIf none fits, explain the external synchronization contract before keeping an effect.
A reviewed integration hook should name the external system, own setup and cleanup, expose its reactive inputs, and list every value used by setup or cleanup. Prefer an existing repository hook. Do not accept a callback and dependency array from callers or suppress exhaustive-dependency checks.
Never use an exception hook to fetch server state, copy props into state, relay user actions, or hide a reset that belongs at a keyed boundary.
Extend the repository's existing linter to reject both named useEffect
imports and React.useEffect(...). Allow only narrow reviewed integration-hook
files. Keep the canonical local gate and CI on that same lint surface; optional
agent guidance or scanners do not replace mechanical enforcement.
In review, treat new direct effects as findings unless the change documents and proves a legitimate external-system boundary. Ask for a replacement plan, not dependency-array tuning.
useLayoutEffect, framework lifecycle APIs, and non-React effect
systems alone unless requested.d7d27ac
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.