no-useeffect
Skill62 starsChanged 2 months agoMITView on GitHub
Apply the user's ban on direct React useEffect calls when implementing or refactoring component synchronization.
In this repository33 other files it gives its agents.
- AGENTS.mdAGENTS.md
- .claude/AGENTS.mdAGENTS.md
- animation-vocabularySkill
- apple-designSkill
- branchSkill
- codebase-designSkill
- code-qualitySkill
- commitSkill
- emil-design-engSkill
- english-modeSkill
- find-animation-opportunitiesSkill
- find-skillsSkill
- grillingSkill
- handoffSkill
- improve-animationsSkill
- investigateSkill
- ios-app-designSkill
- nix-darwinSkill
- prototypeSkill
- react-best-practicesSkill
- resolving-merge-conflictsSkill
- review-animationsSkill
- rust-design-patternsSkill
- self-reviewSkill
- seo-audit-fullSkill
- seo-auditSkill
- skill-creatorSkill
- slow-is-fastSkill
- ste-writingSkill
- tddSkill
- thermo-nuclear-code-quality-reviewSkill
- thermo-nuclear-reviewSkill
- thermosSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 1 is distinctive, and 2 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
2
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 8
Do not call useEffect directly in application components or feature hooks.
- Distinctive: line 30
Use query keys and options consistent with the installed data library.
- Very specific: line 34
Do not replace useEffect with useLayoutEffect merely to bypass the rule.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
No Direct useEffect
Do not call useEffect directly in application components or feature hooks. Use the project's approved primitives and lifecycle architecture. This is the user's coding preference; it does not imply React has no legitimate effect use cases.
Inspect project guidance and lint exemptions first. A project may permit direct effects inside designated low-level primitives such as useMountEffect, useSharedValueSync, or useDelayedFlag. Respect those explicit boundaries instead of imposing a single global wrapper. Do not introduce an unapproved wrapper simply to evade the ban.
Choose by the behavior needed
| Need | Preferred approach |
| Compute a value from props or state | Derive during render; memoize only when the computation warrants it |
| Respond to a user action | Run the action in its event handler or store action |
| Fetch and cache server data | Use the project's query library or framework loader |
| Read a mutable external store | Use its supported hook or useSyncExternalStore |
| Initialize an external resource for a mount | Use the approved mount primitive with cleanup |
| Synchronize a changing input with an external resource | Use an approved reactive primitive or the resource's lifecycle API |
| Reset all local state for a new entity | Use key when a full remount matches the intended behavior |
These are decision aids, not an exhaustive replacement theorem. When none fits, inspect the external system's lifecycle and existing primitives before proposing a design. Follow global AGENTS.md authorization rules; this skill adds no confirmation requirement for established project patterns.
Preserve semantics during refactoring
- Derived state should have a single source of truth. Avoid storing values that can be computed from current inputs.
- User-triggered work belongs in the action path; do not relay it through a state flag and an effect.
- Use query keys and options consistent with the installed data library. Cancellation requires the query function or transport to honor the relevant signal; a library alone does not make every request cancellable.
- A mount primitive is appropriate only when setup belongs to that mounted instance. It is not a drop-in replacement for synchronization that must react to changing dependencies.
- Mount setup may run again after remounts and during development lifecycle checks. Return cleanup, release subscriptions and resources, and handle async completion after disposal.
- A
keyresets the entire subtree, including focus, playback, animations, and local state. Use it only when those resets are intended; do not remount solely to avoid reasoning about updates. - Do not replace
useEffectwithuseLayoutEffectmerely to bypass the rule. Use the project's approved layout mechanism only when synchronous layout work is actually required.
For a new low-level primitive, keep its contract explicit about updates, cleanup, and ownership, and follow project rules for effect exemptions. Select validation through global AGENTS.md; do not add tests solely because an effect was removed.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.