skilld
All skills
softaworks avatar

/react-useeffect

@1c0662a
by softaworkssoftaworks/agent-toolkit2.5k stars
230

React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.

Ask your Agent

Use this Skill: https://skilld.dev/gh/softaworks/agent-toolkit/react-useeffect

This session only. Nothing lands on disk.

SKILL.md

≈58 tokens always: the name and description. ≈523 when used: this file. ≈5.5k more on demand in 3 files.

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

Source: SKILL.md on GitHub

Third-party checks

No alerts16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides educational guidance on React `useEffect` best practices and contains only descriptive markdown and code snippets without code execution capabilities.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    4 files scanned · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 1c0662a. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Dormantupdated 8 months ago

Topics

README badge

README badge for softaworks/agent-toolkit/react-useeffect

What it does

Teaches when to use useEffect for external system synchronization and when to replace it with render-time calculations, useMemo, event handlers, or the key prop. Covers React's official best practices for useState and useEffect patterns, with a decision tree for choosing the right approach.

Generated from the current SKILL.md.

Frequently asked

When should I use useEffect for data fetching?
Use useEffect for data fetching only when you include proper cleanup (e.g., abort controller) to avoid memory leaks. Better alternatives include framework-provided data fetching mechanisms like Next.js or Remix loaders.
Can I use useEffect to derive state from props?
No. Instead, calculate derived values during render at the top level of your component—they'll update automatically when props change. For expensive calculations, wrap with useMemo.
What's the difference between using useEffect with setState versus a key prop to reset state?
When a prop changes, use the key prop on the component to force React to remount it, which naturally resets state. Avoid useEffect with setState for this pattern.
Should I use useEffect to respond to user events like clicks?
No. Use event handlers directly—you know exactly what triggered the action. useEffect is for synchronizing with external systems, not responding to user interaction.

Generated from the current SKILL.md. These answers refresh after source changes.