skills.rest
marnec
marnecCOMMUNITY
Explore all skills by this author →
GitHub

react-useeffect

Guide React useEffect usage with decision trees and anti-pattern alternatives.

1|Updated Nov 9, 2024
Search Tags:#anti-patterns#react#cleanup#best-practices#memoization#useeffect
One-click install
npx skills add https://github.com/marnec/ripple --skill react-useeffect-marnec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-useeffect
Source: https://github.com/marnec/ripple/tree/main/.claude/skills/react-useeffect
Command: npx skills add https://github.com/marnec/ripple --skill react-useeffect-marnec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React useEffect is often misused or overused; this guide helps you decide when an effect is truly necessary and when to prefer alternatives like derived state, useMemo, and event handlers.

Core Features & Use Cases

  • Quick Reference: a concise table of DO/DON'T patterns for common use cases.
  • Decision Tree: a visual flow to determine the right approach (user interaction vs component mount vs prop changes).
  • Anti-Patterns & Alternatives: detailed examples of nine common mistakes with fixes and recommended patterns.
  • Usage Guidance: best practices for cleanup, dependency management, and avoiding race conditions.

Quick Start

Ask for a concise review of a component's effects and suggestions to replace unnecessary useEffect calls with direct calculations, memoization, or event handlers.

Frequently Asked Questions about react-useeffect

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

FAQPage Schema
When should I use useEffect in React instead of derived state or event handlers?▼

Use useEffect in React for external synchronization like data fetching, subscriptions, and analytics. Avoid it for state derived from props or user interactions, where direct calculations, useMemo, or event handlers are better alternatives.

What are the most common useEffect anti-patterns and how do I fix them?▼

Common useEffect anti-patterns include unnecessary effects for derived state or chaining state. Fixes involve replacing effects with direct calculations during render, using useMemo for memoization, or utilizing event handlers for user interactions.

How do I manage cleanup and dependencies to avoid race conditions in useEffect?▼

Manage useEffect cleanup by returning functions to cancel subscriptions or abort fetch requests. Proper dependency management ensures effects run only when needed, preventing race conditions and stale state closures.

How do I decide between useMemo and useEffect for React component logic?▼

Choose useMemo to memoize expensive calculations during render and avoid derived state. Choose useEffect only for synchronizing with external systems, ensuring you apply cleanup and dependency management to prevent race conditions.

Why does my React component render in a loop when using useEffect?▼

A React component renders in a loop when useEffect dependencies update state during the effect cycle. Replace unnecessary effects with derived state, useMemo, or event handlers, and verify dependency arrays to prevent infinite loops.

Related Skills

Explore More Software Engineering Skills→
klenklen
5

react-useeffect-avoid

Identify React useEffect anti-patterns and suggest idiomatic alternatives.

Community
Intermediate
przbaduprzbadu
1

react-useeffect

Identify unnecessary useEffect logic in React components and recommend render-time alternatives.

Community
Intermediate
PatternsDevPatternsDev
235

react-render-optimization

Identify React render bottlenecks and apply memoization patterns.

Official
Advanced
miptah21miptah21
2

react-useeffect

Guides React useEffect selection toward external-system synchronization and safer alternatives like derived render logic, useMemo, key resets, event handlers, or useSyncExternalStore.

Community
Intermediate