Agent skill

No Use Effect

Avoid direct React useEffect usage when writing or reviewing React components and hooks.

Install No Use Effect

skills CLI

$ npx skills add fastrepl/anarlog --skill no-use-effect -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install fastrepl/anarlog no-use-effect --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/fastrepl/anarlog.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/no-use-effect .claude/skills/no-use-effect && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "no-use-effect" agent skill from https://github.com/fastrepl/anarlog/tree/main/.agents/skills/no-use-effect into .claude/skills/no-use-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "no-use-effect", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/fastrepl/anarlog/tree/main/.agents/skills/no-use-effect

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add fastrepl/anarlog --skill no-use-effect -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install fastrepl/anarlog no-use-effect --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/fastrepl/anarlog.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/no-use-effect .agents/skills/no-use-effect && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "no-use-effect" agent skill from https://github.com/fastrepl/anarlog/tree/main/.agents/skills/no-use-effect into .agents/skills/no-use-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "no-use-effect", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add fastrepl/anarlog --skill no-use-effect -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install fastrepl/anarlog no-use-effect --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/fastrepl/anarlog.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/no-use-effect .cursor/skills/no-use-effect && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "no-use-effect" agent skill from https://github.com/fastrepl/anarlog/tree/main/.agents/skills/no-use-effect into .cursor/skills/no-use-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "no-use-effect", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/fastrepl/anarlog.git --path .agents/skills/no-use-effect

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add fastrepl/anarlog --skill no-use-effect -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install fastrepl/anarlog no-use-effect --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/fastrepl/anarlog.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/no-use-effect .gemini/skills/no-use-effect && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "no-use-effect" agent skill from https://github.com/fastrepl/anarlog/tree/main/.agents/skills/no-use-effect into .gemini/skills/no-use-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "no-use-effect", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install fastrepl/anarlog no-use-effect

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add fastrepl/anarlog --skill no-use-effect -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/fastrepl/anarlog.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/no-use-effect .github/skills/no-use-effect && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "no-use-effect" agent skill from https://github.com/fastrepl/anarlog/tree/main/.agents/skills/no-use-effect into .github/skills/no-use-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "no-use-effect", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add fastrepl/anarlog --skill no-use-effect -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install fastrepl/anarlog no-use-effect --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/fastrepl/anarlog.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/no-use-effect .opencode/skills/no-use-effect && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "no-use-effect" agent skill from https://github.com/fastrepl/anarlog/tree/main/.agents/skills/no-use-effect into .opencode/skills/no-use-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "no-use-effect", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: no-use-effect
GitHub stars: 9.5k
Token cost: ~825 tokens
SKILL.md length: 365 words
Files: 1
Skills in repo: 32
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Avoid direct React useEffect usage when writing or reviewing React components and hooks.

Works in 5 steps: Derive state, do not sync it → Use query or mutation libraries for… → Use event handlers for user actions → …
Creating new React code
SKILL.md covers Workflow, Replacement Patterns, Review Standard and Structure React Code This Way
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

No Use Effect is an agent skill from fastrepl/anarlog. Avoid direct React useEffect usage when writing or reviewing React components and hooks. Use this skill when creating new React code, refactoring existing useEffect calls, reviewing PRs that introduce useEffect, or when an agent reaches for useEffect as a default. Replace effects with derived state, query or mutation libraries, event handlers, useMountEffect for mount-only external sync, or key-based remounts.

Its SKILL.md is about 830 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering React components and Refactoring. It works with React. The repository describes itself as: Open source Granola AI Alternative. The licence is MIT.

When your agent uses it

Creating new React code
Refactoring existing useEffect calls
Reviewing PRs that introduce useEffect
An agent reaches for useEffect as a default

Example prompts

“/no-use-effect”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

Derive state, do not sync it
Use query or mutation libraries for async work
Use event handlers for user actions
Use useMountEffect for mount-only external sync
Use key to reset component state

What it can do on your machine

Read from SKILL.md and the folder at commit 385e117. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

No Use Effect loads about 825 tokens when it runs. Until then it costs about 110 tokens; SKILL.md has 365 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~110
When it runs · the whole SKILL.md, loaded when a task matches: ~825

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from fastrepl/anarlog at commit 385e117, republished under its MIT licence (© fastrepl). 365 words, ~825 tokens.

Download SKILL.mdSave it as .claude/skills/no-use-effect/SKILL.md (or your agent's skills folder).

name: no-use-effect
description: Avoid direct React `useEffect` usage when writing or reviewing React components and hooks. Use this skill when creating new React code, refactoring existing `useEffect` calls, reviewing PRs that introduce `useEffect`, or when an agent reaches for `useEffect` as a default. Replace effects with derived state, query or mutation libraries, event handlers, `useMountEffect` for mount-only external sync, or `key`-based remounts.

No useEffect

Never call useEffect directly unless the work is a true mount-only sync with an external system and no simpler pattern fits. Prefer a render-time computation, a query or mutation hook, an event handler, or a remount boundary instead.

Workflow

Classify why the effect exists.
Replace it with the narrowest pattern below.
Verify with the project's normal lint, typecheck, and tests.

Replacement Patterns

1. Derive state, do not sync it

Replace useEffect(() => setX(derive(y)), [y]) with inline computation or the project's existing memoization conventions.

tsx

const filteredProducts = products.filter((product) => product.inStock);

Smell test: state only mirrors props or other state.

2. Use query or mutation libraries for async work

Replace fetch-in-effect code with the app's data layer.

tsx

const productQuery = useQuery({
  queryKey: ["product", productId],
  queryFn: () => fetchProduct(productId),
});

Smell test: the effect fetches, awaits, retries, cancels, or writes async results into local state.

Do the work where the action happens instead of setting a flag and reacting later.

tsx

const handleLike = () => {
  postLike();
};

Smell test: state exists only to trigger an effect, then gets reset.

4. Use `useMountEffect` for mount-only external sync

Use this only for work that is naturally "set up on mount, clean up on unmount": DOM integration, subscriptions, third-party widgets, and stable singleton bindings.

If the project already has a useMountEffect, use it. If not, add a small wrapper:

tsx

import { useEffect } from "react";

export function useMountEffect(effect: () => void | (() => void)) {
  useEffect(effect, []);
}

Prefer changing component structure so the component only mounts once preconditions are satisfied.

Smell test: the effect is a one-time setup or teardown for something outside React.

Show full SKILL.md (129 more words)Show less

5. Use `key` to reset component state

If a component should behave like a fresh instance when an ID or entity changes, remount it from the parent.

tsx

return <VideoPlayer key={videoId} videoId={videoId} />;

Smell test: the effect exists only to reset local state when props change.

Review Standard

Treat new direct useEffect usage as a bug by default. Ask which of the five patterns applies. Accept direct useEffect only with explicit justification that the code is a mount-only external sync and that useMountEffect is the intended escape hatch.

Structure React Code This Way

Order component logic like this:

Hooks that read external state or data.
Local state.
Derived values computed during render.
Event handlers.
Early returns.
Render output.

Do not introduce mirrored state just to make an effect possible.

Files

Just SKILL.md in .agents/skills/no-use-effect of fastrepl/anarlog.

Open the folder on GitHubat commit 385e117

Compare with similar skills

No Use Effect next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

No Use Effect compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
No Use Effect this skillfastrepl/anarlog	9.5k	—	~825	Automated safety check: Pass	MIT	today
Vercel React Best Practicessanity-io/sanity	6.4k	130 repos	~1.6k	Automated safety check: Pass	MIT	today
Dify Component Writing Guidelanggenius/dify	158k	—	~626	Automated safety check: Pass	Custom licence	today
React Best Practicesmastra-ai/mastra	29k	—	~1.9k	Automated safety check: Pass	Custom licence	today
Eisland Dev Refactor Module SplitJNTMTMTM/eIsland	320	—	~2.2k	Automated safety check: Pass	GPL-3.0	today
Eisland Dev Refactor Module SplitJNTMTMTM/eIsland	320	—	~3.2k	Automated safety check: Pass	GPL-3.0	today

Similar skills

Vercel React Best Practices
sanity-io/sanity
Official
React and Next.js performance optimization guidelines from Vercel Engineering.
6.4k GitHub starsUsed in 130 repos~1.6k tokens
Frontend & DesignAuto-check passed
Dify Component Writing Guide
langgenius/dify
Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…
158k GitHub stars~626 tokensUpdated today
Frontend & DesignAuto-check passed
React Best Practices
mastra-ai/mastra
React performance optimization guidelines from Mastra Engineering.
29k GitHub stars~1.9k tokensUpdated today
Frontend & DesignAuto-check passed
Eisland Dev Refactor Module Split
JNTMTMTM/eIsland
Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, and config/ subdirectories.
320 GitHub stars~2.2k tokensUpdated today
Frontend & DesignAuto-check passed
Eisland Dev Refactor Module Split
JNTMTMTM/eIsland
Refactor a monolithic React component file into a standardized module structure with components/, hooks/, utils/, types/, and config/ subdirectories.
320 GitHub stars~3.2k tokensUpdated today
Frontend & DesignAuto-check passed
React Best Practices
ryokun6/ryos
React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).
1.3k GitHub stars~2k tokensUpdated today
Frontend & DesignAuto-check passed

Questions about No Use Effect

What does No Use Effect do?

Avoid direct React useEffect usage when writing or reviewing React components and hooks. No Use Effect is an agent skill from fastrepl/anarlog. Avoid direct React useEffect usage when writing or reviewing React components and hooks.

When should I use No Use Effect?

No Use Effect fits situations like: creating new React code; refactoring existing useEffect calls; reviewing PRs that introduce useEffect; an agent reaches for useEffect as a default.

How do I install No Use Effect in Claude Code?

Run `npx skills add fastrepl/anarlog --skill no-use-effect -a claude-code`. Or copy the skill folder (.agents/skills/no-use-effect in fastrepl/anarlog) into .claude/skills/no-use-effect in your project. Claude Code loads it when a task matches its description.

How do I install No Use Effect in Codex?

Run `npx skills add fastrepl/anarlog --skill no-use-effect -a codex`. Or copy the skill folder (.agents/skills/no-use-effect in fastrepl/anarlog) into .agents/skills/no-use-effect in your project. Codex loads it when a task matches its description.

Can I use No Use Effect in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add fastrepl/anarlog --skill no-use-effect -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/no-use-effect, .gemini/skills/no-use-effect, .github/skills/no-use-effect and .opencode/skills/no-use-effect in your project.

What does No Use Effect need to run?

SKILL.md names no scripts, command-line tools or credentials: No Use Effect is instructions for the agent only.

Does No Use Effect access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is No Use Effect safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does No Use Effect use?

No Use Effect is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does No Use Effect use?

About 825 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to No Use Effect?

Skills that share tags, products or a category with No Use Effect: Vercel React Best Practices (sanity-io/sanity, 6.4k stars), Dify Component Writing Guide (langgenius/dify, 158k stars), React Best Practices (mastra-ai/mastra, 29k stars) and Eisland Dev Refactor Module Split (JNTMTMTM/eIsland, 320 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains No Use Effect?

fastrepl (a GitHub organization) maintains it in fastrepl/anarlog, which has 9,452 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on October 8, 2026.

Source: fastrepl/anarlog on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install No Use Effect

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

No useEffect

Workflow

Replacement Patterns

1. Derive state, do not sync it

2. Use query or mutation libraries for async work

3. Use event handlers for user actions

4. Use useMountEffect for mount-only external sync

5. Use key to reset component state

Review Standard

Structure React Code This Way

Files

Compare with similar skills

Similar skills

More from fastrepl/anarlog

Related

Questions about No Use Effect

4. Use `useMountEffect` for mount-only external sync

5. Use `key` to reset component state