karton-best-practices

What problem does it solve?

This Skill provides essential guidelines and patterns for writing performant React code that interacts with Karton's state management system, preventing unnecessary re-renders and ensuring efficient data consumption.

Core Features & Use Cases

• Selector Optimization: Learn how to write selectors that leverage Immer's structural sharing and Object.is for efficient re-render prevention.
• useComparingSelector: Understand when and how to use useComparingSelector with shallow or deep comparators to stabilize references.
• Derived State Management: Implement best practices for computing derived data using useMemo outside of selectors.
• Use Case: When developing a complex dashboard that displays real-time agent statuses, applying these best practices ensures that only the components displaying changed data re-render, maintaining a smooth user experience even with frequent state updates.

Quick Start

Use the karton-best-practices skill to understand how to prevent re-renders when selecting nested state.