When should I avoid useEffect altogether?

If there is no external system involved, derive values during render and avoid effects; use useMemo for expensive calculations and compute derived state directly.

Should I always use useSyncExternalStore for subscriptions?

Use useSyncExternalStore when possible for external store subscriptions; otherwise, follow stable subscription patterns and ensure proper cleanup.

How do I decide between useEffect and framework-provided data-fetching?

If your data fetching can be managed by the framework or architecture, prefer that; use useEffect with cleanup when you need to integrate with React lifecycle and external fetches.

react-useeffect

npx machina-cli add skill softaworks/agent-toolkit/react-useeffect --openclaw

Files (1)

SKILL.md

2.3 KB

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

Transforming data for rendering - Calculate at top level, re-runs automatically
Handling user events - Use event handlers, you know exactly what happened
Deriving state - Just compute it: const fullName = firstName + ' ' + lastName
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 - Common mistakes with fixes
Better Alternatives - useMemo, key prop, lifting state, useSyncExternalStore

Source

git clone https://github.com/softaworks/agent-toolkit/blob/main/skills/react-useeffect/SKILL.mdView on GitHub

Overview

This skill explains when to use useEffect, when to avoid it, and which patterns to prefer for data fetching, external synchronization, and analytics. It emphasizes computing derived values during render, using proper cleanup, and leveraging alternatives like key props and useSyncExternalStore.

How This Skill Works

The guide walks you through a decision process: if you need to synchronize with external systems, useEffect; otherwise compute derived values during render or via useMemo. It also highlights anti-patterns and points to better alternatives such as useSyncExternalStore and key props to reset state.

When to Use It

Synchronizing with external systems or browser APIs
Subscriptions to external stores (use useSyncExternalStore when possible)
Analytics or logging that runs when the component is displayed
Data fetching with proper cleanup (or framework-supported patterns)
Component mounting or prop/state changes that require external synchronization

Quick Start

Step 1: Decide if an effect is actually needed using the decision guidance (external sync, analytics, data fetch) or if a render-time calculation is sufficient
Step 2: If an effect is needed, implement it with proper cleanup and consider alternatives like useSyncExternalStore or a key prop where appropriate
Step 3: Avoid using effects for derived state or event handling; compute values in render or with useMemo, and attach explicit event handlers

Best Practices

Derive state during render instead of using useEffect for derived values
Use useMemo for expensive calculations rather than deferring them to an effect
Reset state on prop changes with a key prop, not with useEffect
Handle user events with explicit event handlers rather than relying on effects
Always clean up effects to prevent memory leaks; align data-fetching patterns with framework guidance

Example Use Cases

Data fetch with cleanup: fetch user data on mount and cancel on unmount
Subscribing to an external store using useSyncExternalStore to mirror external data
Analytics: log a page impression in an effect when the component renders
Derived values: compute fullName from firstName and lastName inside render
Resetting form state by changing the key prop when a parent passes a different userId

Frequently Asked Questions

Add this skill to your agents