CtrlK
BlogDocsLog inGet started
Tessl Logo

react-ban-use-effect

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

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

React Ban useEffect

Treat direct effects as an external-synchronization escape hatch, not a default state-management tool.

Workflow

  1. Search the touched React surface for direct imports, namespace calls, and wrappers around useEffect.
  2. Classify each effect before editing:
    • render-time derivation
    • server data or client-owned server state
    • user-caused work
    • identity-driven reset
    • external store or system synchronization
    • async UI or performance staging
  3. Apply the matching pattern in replacements. Read alternatives only when the effect exposes a broader data, form, store, or performance ownership problem.
  4. Preserve the repository's framework, data layer, lint shape, and dependency policy. Do not introduce a new library without approval.
  5. Run lint, type, and test gates plus the smallest real UI or hook check for the changed behavior.

Decision Order

Prefer, in order:

  1. render-time calculation
  2. server, loader, or framework data API
  3. repository-owned server-state layer
  4. event handler, action, or mutation
  5. keyed component boundary
  6. useSyncExternalStore
  7. reviewed domain-specific hook for a real external system

If none fits, explain the external synchronization contract before keeping an effect.

Legitimate Effects

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.

Enforcement

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.

Boundaries

  • Scope migrations to the touched or requested surface.
  • Leave useLayoutEffect, framework lifecycle APIs, and non-React effect systems alone unless requested.
  • Apply performance primitives only for measured behavior or an established repository pattern.
  • Keep upstream attribution in upstream.
Repository
uinaf/agent-skills
Last updated
First committed

Is this your skill?

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.