react-render-performance

Reduce React re-renders by subscribing components to precise external state slices.

2|Updated Feb 23, 2026

Search Tags:#react #zustand #state-management #redux #xstate #selectors #render

Ready to run

npx skills add https://github.com/jonmumm/skills --skill react-render-performance

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-render-performance
Source: https://github.com/jonmumm/skills/tree/main/react-render-performance
Command: npx skills add https://github.com/jonmumm/skills --skill react-render-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about react-render-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

Why does my Zustand store trigger unnecessary React re-renders?▼

Zustand triggers unnecessary React re-renders when components subscribe to the entire store instead of precise slices. Using module-level selectors that return primitives or stable references ensures components only re-render when the relevant state actually changes.

How do I prevent high-level React components from re-rendering frequently?▼

To prevent high-level React components from re-rendering frequently, push state subscriptions down to lower leaf components. These leaves should subscribe to small stores or precise selectors, avoiding high-level stores by default to isolate updates.

How do I select precise state slices with XState or Redux?▼

Selecting precise state slices with XState or Redux requires using module-level selectors that return primitives or stable references. This selector-based subscription pattern ensures components re-render only when the specific derived value updates.

Does this selector-based subscription approach work with React context?▼

Yes, the selector-based subscription approach works with React context. It applies to components using external state libraries like XState, Zustand, Redux, Nanostores, and React context across apps of various sizes to prevent unnecessary re-renders.

What is the best way to structure React state selectors for performance?▼

The best way to structure React state selectors for performance is to use module-level selectors that return primitives or stable references. This prevents unrelated state updates from triggering re-renders in components subscribed to external stores.

When should I not use module-level selectors for state management?▼

You should avoid module-level selectors when a component genuinely needs to subscribe to the entire store or when the overhead of slicing state outweighs the re-render cost. Returning unstable references without selectors can also cause performance issues.