avoid-effects

What problem does it solve?

React code often relies on useEffect to manage a wide range of side effects, causing unnecessary renders, stale state, and convoluted data flow. This Skill helps you distinguish when an effect is truly needed and how to move logic into event handlers or render paths to keep components predictable.

Core Features & Use Cases

• Clarifies when to use useEffect for external sync (fetching data, subscriptions, analytics) and when to handle logic in events or during rendering.
• Provides patterns to avoid derived state inside effects, implement proper cleanup, and cancel asynchronous tasks.
• Covers common scenarios such as prop changes, conditional effects, and avoiding chain-reaction updates by consolidating logic in handlers.

Quick Start

Refactor a component that uses an effect for data fetch on mount so that the fetch is triggered by a user action and all derived state is computed in render.