defer-state-reads-to-usage-point

What problem does it solve?

This Skill addresses inefficient state management in web applications by preventing unnecessary subscriptions to dynamic data like search parameters or local storage when the data is only read once within a callback function.

Core Features & Use Cases

• Optimized State Handling: Avoids subscribing to global state changes (e.g., useSearchParams, localStorage) if the value is only needed at the moment of an event.
• Improved Performance: Reduces unnecessary re-renders and computations by deferring state reads until they are actively used.
• Use Case: In a component that shares a chat link, instead of subscribing to all search parameter changes, read the 'ref' parameter directly within the handleShare function only when the button is clicked.

Quick Start

Refactor the ShareButton component to read ref from window.location.search inside the handleShare function.