react-effects_skill

Overview

This skill provides practical guidelines for when to use and when to avoid useEffect in React components. It focuses on common patterns, legitimate effect use cases, and clear alternatives that keep components predictable and easy to test. The advice emphasizes deriving values during render, moving logic to event handlers, and using the right built-in hooks for external subscriptions.

How this skill works

The skill inspects common decision points before adding useEffect and recommends alternatives: derive values in render, use key to reset internal state, handle user-triggered logic in event handlers, and use effects only for side effects that must run outside render. It also covers specialized solutions like useSyncExternalStore for external data sources, race-condition guards for async fetches, and module-level guards for once-per-app initialization.

When to use it

• When interacting with the DOM (focus, scroll, measurements).
• When integrating non-React libraries or lifecycle-managed widgets (charts, terminals).
• When subscribing to browser APIs (ResizeObserver, IntersectionObserver).
• When fetching data in response to mount or prop changes.
• When registering global event listeners or imperative APIs.

Best practices

• Derive values during render instead of storing computed state.
• Use the key prop to reset component-local state when a parent prop changes.
• Put event-driven logic inside event handlers rather than triggering it from an effect.
• Prefer useSyncExternalStore for subscribing to external data stores instead of manual effect subscription.
• Guard async effects against race conditions using a local ignore flag and cleanup.
• For once-per-app initialization, use a module-level guard or run code at module load time instead of relying on component mounts.

Example use cases

• Auto-focus an input after mount using an effect that calls focus on a ref.
• Initialize a third-party chart once and clean up on unmount inside an effect.
• Subscribe to window resize or intersection events via an effect, or use a built-in observer hook.
• Fetch data when a route param changes and cancel outdated responses with an ignore flag.
• Reset a profile form by rendering <Profile key={userId} /> instead of clearing state in an effect.