dev-style-react-no-use-effect

Scan React codebases for useEffect anti-patterns and report fixes.

Updated Jun 17, 2025

Search Tags:#typescript #anti-patterns #react #javascript #static-analysis #code-audit #useeffect

Ready to run

npx skills add https://github.com/nikbrunner/dots --skill dev-style-react-no-use-effect

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dev-style-react-no-use-effect
Source: https://github.com/nikbrunner/dots/tree/main/common/.agents/skills/dev-style-react-no-use-effect
Command: npx skills add https://github.com/nikbrunner/dots --skill dev-style-react-no-use-effect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scan React codebase for useEffect anti-patterns (derived state, event logic in effects, effect chains, prop-driven resets, missing cleanup, parent notifications, etc.) and propose idiomatic fixes. Based on React's "You Might Not Need an Effect" guide. Use when asked to audit, review, or clean up useEffect usage.

Core Features & Use Cases

Find: Detect anti-patterns like Derived State, Event Logic in Effect, Reset on Prop Change, etc.
Suggest: Provide idiomatic React fixes and alternatives.
Use Case: Audit a UI dashboard component to streamline effect usage and improve reliability.

Quick Start

Run a scan on the target React project to identify useEffect anti-patterns and propose concrete fixes.

Frequently Asked Questions about dev-style-react-no-use-effect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I find and fix useEffect anti-patterns in my React codebase?▼

Scan your React codebase to identify problematic patterns like derived state, event logic in effects, and missing cleanup. The audit groups findings by anti-pattern and outputs a structured report with file paths, line numbers, and recommended idiomatic fixes.

What are common useEffect anti-patterns I should look for during a code audit?▼

Common useEffect anti-patterns include derived state, event logic in effects, effect chains, prop-driven resets, missing cleanup, and parent notifications. Identifying these during a React code audit helps streamline effect usage and apply idiomatic alternatives.

Can I use static analysis to detect missing cleanup in React useEffect hooks?▼

Yes, you can use static analysis to detect missing cleanup in React useEffect hooks. Scanning functional components and files surfaces missing cleanup patterns and outputs a structured report with file paths and line numbers for targeted fixes.

Does this useEffect audit work with both JavaScript and TypeScript React projects?▼

Yes, the useEffect audit works with both JavaScript and TypeScript React projects. It scans functional components and files across JS/TS environments to classify problematic useEffect patterns and propose idiomatic fixes.

What is the best way to clean up derived state and event logic in React effects?▼

The best way to clean up derived state and event logic in React effects is to audit your codebase for these specific anti-patterns. Replacing them with idiomatic React fixes streamlines component logic and improves overall application reliability.

Why should I avoid prop-driven resets and effect chains in React components?▼

You should avoid prop-driven resets and effect chains in React components because they are anti-patterns that reduce reliability. Auditing these occurrences and applying recommended fixes ensures cleaner state management and more predictable component behavior.