react-render-performance

What problem does it solve?

Reduce unnecessary React re-renders by subscribing components to precise slices of external state rather than the full store. This prevents unrelated updates from triggering re-renders and improves performance in apps that use state libraries like XState, Zustand, Redux, Nanostores, or React context.

Core Features & Use Cases

• Selector-based subscriptions for XState, Zustand, Redux, and Nanostores to re-render only when the relevant slice changes.
• Guidance on structuring components so that lower leaves subscribe to small stores or selectors, avoiding high level stores by default.
• Practical examples across common patterns: actor-based state with XState, store-based state with Zustand or Redux, and derived values with Nanostores.

Quick Start

Identify high level components that subscribe to whole stores and replace them with module level selectors that return primitives or stable references.