dont-use-use-effect

Reviews React code for incorrect usage of the useEffect hook.

Updated Aug 23, 2026

Search Tags:#code quality #performance #frontend #react #javascript #useEffect

Ready to run

npx skills add https://github.com/mnadalc/dotfiles --skill dont-use-use-effect

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dont-use-use-effect
Source: https://github.com/mnadalc/dotfiles/tree/main/.ai/skills/react-dont-use-use-effect
Command: npx skills add https://github.com/mnadalc/dotfiles --skill dont-use-use-effect

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers avoid common pitfalls and anti-patterns when using React's useEffect hook, ensuring more efficient, maintainable, and bug-free React applications.

Core Features & Use Cases

Identify Anti-Patterns: Detects and guides users away from incorrect uses of useEffect for derived state, event handling, or state resetting.
Correct Usage Guidance: Explains when useEffect is appropriate for synchronizing with external systems.
Best Practices Enforcement: Covers essential aspects like cleanup functions, dependency arrays, useEffectEvent, and handling race conditions.
Use Case: When refactoring a React component, use this Skill to review all useEffect hooks, ensuring they are correctly implemented and that no better alternatives exist.

Quick Start

Review the provided React code snippet for any incorrect usage of the useEffect hook.

Frequently Asked Questions about dont-use-use-effect

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

FAQPage Schema

When should I avoid using useEffect in React components?▼

Avoid using useEffect for derived state, event handling, or state resetting. The useEffect hook should specifically be used for synchronizing your React components with external systems, not for managing internal component logic.

How do I manage race conditions in useEffect when fetching data?▼

To manage race conditions in useEffect, you need to implement proper cleanup functions and follow best practices for dependency arrays. This ensures your React components handle asynchronous data fetching safely without conflicting state updates.

What's the best way to handle cleanup in a React useEffect hook?▼

The best way to handle useEffect cleanup is to return a cleanup function from the hook to properly unsubscribe from external systems. Enforcing correct dependency arrays alongside this cleanup prevents memory leaks and ensures proper component synchronization.

Can I use useEffectEvent for React event handling logic?▼

Yes, useEffectEvent can be used to handle event logic outside of the standard useEffect lifecycle. This approach helps separate event handling from external system synchronization, reducing unnecessary effect re-runs and improving component performance.

Why does my React useEffect run infinitely or cause performance issues?▼

Your useEffect likely runs infinitely due to incorrect dependency arrays or using it for derived state instead of external system synchronization. Reviewing dependency arrays and removing state-derived logic from effects resolves these performance issues.