put-interaction-logic-in-event-handlers

What problem does it solve?

This Skill addresses a common pitfall in React development where side effects triggered by user actions are incorrectly modeled as state changes, leading to potential bugs and duplicated logic.

Core Features & Use Cases

• Direct Event Handling: Encourages placing logic directly within event handlers (like onClick, onSubmit) rather than relying on useEffect for actions tied to specific user interactions.
• Prevents Effect Re-runs: Avoids unnecessary re-execution of effects when unrelated state changes occur.
• Use Case: When a user clicks a "Submit" button, the form submission logic should execute directly in the onClick handler, not be triggered by a submitted state variable that might be affected by other parts of the component.

Quick Start

Refactor your React component to move interaction logic directly into event handlers.