tanstack-store

Manage immutable reactive state with stores, derived values, and effects.

29|2|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/tanstack-skills/tanstack-skills --skill tanstack-store
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-store
Source: https://github.com/tanstack-skills/tanstack-skills/tree/main/plugins/tanstack-store/skills/tanstack-store
Command: npx skills add https://github.com/tanstack-skills/tanstack-skills --skill tanstack-store

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manage application state and derived computations consistently and efficiently across frameworks while avoiding manual subscriptions, unnecessary re-renders, and imperative mutation patterns. It provides a predictable, immutable API for state updates, computed values, and side effects so developers can reason about data flow and lifecycle across React, Vue, Solid, Angular, and Svelte.

Core Features & Use Cases

  • Store: Lightweight immutable state container with get/set state, previous state access, and subscriber management for local and module-level singletons.
  • Derived: Declarative computed values with dependency tracking, previous value support, chaining for filter → sort → paginate pipelines, and explicit mount/unmount lifecycle.
  • Effect: Side-effect management with dependency-driven execution, eager option, and cleanup support for timers and external subscriptions.
  • Batching & Performance: batch updates to coalesce notifications and React adapter features like selectors and shallow equality to minimize re-renders.
  • Use Case: Build a client-side list that filters, sorts, paginates, and displays derived metrics with efficient React subscriptions and clean lifecycle handling.

Quick Start

Create a Store for your data, add a Derived computed value, call mount() on the Derived or an Effect, and use the useStore adapter in your framework to read selected values and update state.

Frequently Asked Questions about tanstack-store

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

FAQPage Schema
How do I manage immutable reactive state in React without unnecessary re-renders?

You can manage immutable reactive state by creating a Store for your data and using framework adapter hooks like useStore with selector-based subscriptions and shallow equality. This approach batches updates and ensures components only re-render when selected values actually change.

What is the best way to compute derived state from a reactive store?

The best way to compute derived state is using declarative Derived containers with automatic dependency tracking. This supports chaining for filter, sort, and paginate pipelines, recalculating only when dependencies change, and provides explicit mount and unmount lifecycle management.

Does this reactive state management approach work with Vue, Solid, Angular, and Svelte?

Yes, this reactive state approach supports Vue, Solid, Angular, and Svelte through dedicated framework adapters. These adapters handle local state, computed values, and subscriptions consistently, allowing you to manage application data predictably across different frontend environments.

How do I batch state updates to coalesce notifications in a reactive store?

You batch state updates to coalesce notifications by wrapping multiple set operations within a batch function. This delays subscriber notifications until all updates complete, preventing redundant UI renders and optimizing performance across your application's reactive state containers.

Can I handle side effects and cleanup logic with reactive state management?

Yes, you can handle side effects using Effect handlers that provide dependency-driven execution and cleanup support. This allows you to manage external subscriptions and timers efficiently, with options for eager execution and explicit cleanup during the mount and unmount lifecycle.

When should I avoid using immutable state containers for frontend state?

You should avoid immutable state containers if your application requires direct, imperative mutation patterns or lacks a need for derived computations and cross-framework consistency. This approach is designed for predictable data flow and may add unnecessary abstraction for simple, localized component state.