Skill29.5k repo starsupdated 2d ago

you-might-not-need-an-effect

This Claude Code command analyzes React code for common useEffect anti-patterns such as unnecessary effects, missing dependencies, and logic that could be moved outside effects. It references React's official guidelines and either proposes fixes or automatically applies them to your specified scope, which can range from current changes to entire codebases.

View source Repository: sim

Install in Claude Code

Copy

git clone --depth 1 https://github.com/simstudioai/sim /tmp/you-might-not-need-an-effect && cp -r /tmp/you-might-not-need-an-effect/.agents/skills/you-might-not-need-an-effect ~/.claude/skills/you-might-not-need-an-effect

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# You Might Not Need an Effect

Arguments:
- scope: what to analyze (default: your current changes). Examples: "diff to main", "PR #123", "src/components/", "whole codebase"
- fix: whether to apply fixes (default: true). Set to false to only propose changes.

User arguments: $ARGUMENTS

Steps:
1. Read https://react.dev/learn/you-might-not-need-an-effect to understand the guidelines
2. Analyze the specified scope for useEffect anti-patterns
3. If fix=true, apply the fixes. If fix=false, propose the fixes without applying.

## Query-backed forms

When query data supplies the initial values for an editable form, do not copy it into draft state in an Effect. Render loading chrome in an outer component, then mount a keyed form child once data exists and initialize its state lazily from props. Key by the resource identity so every related draft, dialog, and upload state resets together when the resource changes. Keep independent queries in the outer component to preserve parallel fetching.