react-useeffect

Name: react-useeffect
Author: Softaworks

reactuseEffectreact hooksfrontendstate managementdata fetchingcode qualityperformance

⭐ 2.0k📄 MIT🕒 2026-03-05Source ↗

Install this skill

npx skills add softaworks/agent-toolkit

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

The useEffect hook serves as the primary bridge between React components and non-React environments. It acts as an escape hatch, providing a mechanism to synchronize component state with external systems like browser APIs, third-party libraries, or network data streams. Because it executes after the render cycle, it manages side effects that should not interfere with the rendering process itself. Developers often misuse this hook to manage internal state transitions or data transformations that React handles automatically. When used correctly, it ensures that your application stays aligned with external changes without triggering redundant renders or memory leaks. Understanding the dependency array is critical for controlling exactly when the effect logic runs, preventing infinite loops and ensuring that resources are cleaned up appropriately when the component unmounts.

When to Use This Skill

•Integrating a third-party non-React charting library
•Setting up a WebSocket connection for real-time updates
•Adding and removing DOM event listeners manually
•Performing data fetching with race condition protection

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

“how to run code after component mounts
“connect react to a websocket
“proper way to fetch data in a hook
“clean up event listeners in react
“synchronize with external library

Pro Tips

💡Always question if an Effect is truly necessary; often, derived state or event handlers are simpler, more direct solutions.
💡When data fetching in `useEffect`, ensure you implement proper cleanup functions to prevent memory leaks and race conditions.
💡Combine this skill with `useMemo` and `useCallback` to further optimize performance by memoizing expensive computations and stable functions.

What this skill does

•Synchronizes React state with browser-specific APIs
•Manages cleanup functions to prevent memory leaks on unmount
•Observes dependency changes to trigger conditional logic
•Connects components to external data subscriptions
•Logs analytics events upon component lifecycle milestones

When not to use it

✕Transforming data or props for rendering purposes
✕Updating state in response to user-triggered events

Example workflow

Define the synchronization logic within the callback
Specify the dependency array to target relevant variables
Return a cleanup function to handle resource disposal
Attach the component to the DOM
Trigger the side effect post-render
Execute cleanup when dependencies change or component unmounts

Prerequisites

–Basic understanding of React component lifecycle
–Familiarity with functional components

Pitfalls & limitations

!Creating infinite loops by omitting or misconfiguring the dependency array
!Forgetting to return a cleanup function leading to memory leaks
!Over-using effects for tasks that simple variable calculation handles

FAQ

Why is my effect running twice?

In development mode, React purposefully invokes effects twice to help identify and surface potential issues or non-idempotent logic.

What happens if I leave the dependency array empty?

An empty array signals that the effect should only execute once, immediately after the component mounts.

Can I use async functions directly in useEffect?

No, you must define an async function inside the effect and call it, because the effect callback itself must either return nothing or a cleanup function.

How it compares

Unlike manual event handling which responds to user input, useEffect is specifically for syncing state with external systems that exist outside the React component lifecycle.

Source & trust

⭐ 2.0k stars📄 MIT🕒 Updated 2026-03-05

View original skill on GitHub →

📄 Full skill instructions — original source: softaworks/agent-toolkit

# You Might Not Need an Effect

Effects are an **escape hatch** from React. They let you synchronize with external systems. If there is no external system involved, you shouldn't need an Effect.

## Quick Reference

| Situation | DON'T | DO |
|-----------|-------|-----|
| Derived state from props/state | useState + useEffect | Calculate during render |
| Expensive calculations | useEffect to cache | useMemo |
| Reset state on prop change | useEffect with setState | key prop |
| User event responses | useEffect watching state | Event handler directly |
| Notify parent of changes | useEffect calling onChange | Call in event handler |
| Fetch data | useEffect without cleanup | useEffect with cleanup OR framework |

## When You DO Need Effects

- Synchronizing with **external systems** (non-React widgets, browser APIs)
- **Subscriptions** to external stores (use useSyncExternalStore when possible)
- **Analytics/logging** that runs because component displayed
- **Data fetching** with proper cleanup (or use framework's built-in mechanism)

## When You DON'T Need Effects

1. **Transforming data for rendering** - Calculate at top level, re-runs automatically
2. **Handling user events** - Use event handlers, you know exactly what happened
3. **Deriving state** - Just compute it: const fullName = firstName + ' ' + lastName
4. **Chaining state updates** - Calculate all next state in the event handler

## Decision Tree

Need to respond to something?
├── User interaction (click, submit, drag)?
│   └── Use EVENT HANDLER
├── Component appeared on screen?
│   └── Use EFFECT (external sync, analytics)
├── Props/state changed and need derived value?
│   └── CALCULATE DURING RENDER
│       └── Expensive? Use useMemo
└── Need to reset state when prop changes?
    └── Use KEY PROP on component

## Detailed Guidance

- [Anti-Patterns](./anti-patterns.md) - Common mistakes with fixes
- [Better Alternatives](./alternatives.md) - useMemo, key prop, lifting state, useSyncExternalStore

By Softaworks

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/react-useeffect/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/softaworks/agent-toolkit/react-useeffect/SKILL.md
Cursor: ~/.cursor/skills/softaworks/agent-toolkit/react-useeffect/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/softaworks/agent-toolkit/react-useeffect/SKILL.md