react-useeffect-avoid_skill

Overview

This skill guides React developers on when NOT to use useEffect and offers practical, safer alternatives. It focuses on avoiding common anti-patterns (derived state, flag-driven actions, waterfall effects) and suggests event-driven, render-time, and subscription-safe patterns. Use it when reviewing code, troubleshooting performance, or redesigning component logic.

How this skill works

The skill inspects code patterns and decision points where useEffect is commonly misapplied and recommends concrete replacements: compute derived values during render, handle user intent in event handlers, use key-based remounts for full resets, and use useSyncExternalStore or data libraries for external subscriptions and fetching. It explains trade-offs and when useEffect remains appropriate.

When to use it

• Code reviews to spot double-renders and cascading effects
• Refactoring components that compute state from other state or props
• Debugging UI staleness after prop changes or remount issues
• Evaluating data-fetching or subscription patterns for concurrency safety
• Optimizing form logic and removing flag-driven effect flows

Best practices

• Calculate derived values during render instead of syncing them in effects
• Perform user-triggered work directly in event handlers, not via state flags
• Use a key prop to force a full component remount when a full state reset is needed
• Prefer useSyncExternalStore for browser APIs or subscription sources to avoid tearing
• Choose data libraries (React Query, SWR) or React 19's use API for fetching instead of effect-based fetchers

Example use cases

• Replace useEffect-based list filtering with an inline filter during render
• Swap a submitted-flag+effect login flow for a direct async submit handler
• Remove a cascade of validation effects by handling validation and submission atomically in handlers
• Reset a form when switching users by keying the form component to userId
• Subscribe to window resize using useSyncExternalStore instead of setState in useEffect