store-event-handlers-in-refs

What problem does it solve?

This Skill addresses the issue of unnecessary re-subscriptions in React effects when event handlers change, leading to performance degradation.

Core Features & Use Cases

• Stable Event Subscriptions: Ensures that event listeners in React effects do not re-subscribe on every render due to handler changes.
• Ref-based Handler Management: Utilizes useRef to maintain a stable reference to the latest event handler.
• useEffectEvent Integration: Demonstrates the cleaner approach using useEffectEvent for modern React versions.
• Use Case: Preventive maintenance for React applications experiencing performance issues related to frequent event listener re-attachments.

Quick Start

Implement the provided React hook pattern to store event handlers in refs for stable subscriptions.