better-useeffect

What problem does it solve?

This skill helps you reduce reliance on useEffect for derived state, data fetching, or prop-driven side effects by guiding reviewers to prefer render-time derivations, event handlers, external data layers, or explicit mount/unmount boundaries.

Core Features & Use Cases

• Identify useEffect patterns that derive state and suggest render-time calculations.
• Promote data fetching through dedicated query/data layers rather than effects.
• Encourage event-driven actions and explicit mount/unmount handling via useMountEffect or key-based remounts.
• Use Case: Refactor components that sync from props into render-time derived values for safer updates.

Quick Start

Review a React component with useEffect usage and rewrite to derive values during render, move data-fetching to a data layer, and isolate side effects in event handlers or mount effects.