Implements reactive state management with Store, Derived, Effect, and batch primitives.
npx skills add https://github.com/firstaxel/neon --skill tanstack-store-firstaxel
Please help me install this Agent Skill. Skill: tanstack-store Source: https://github.com/firstaxel/neon/tree/main/.agents/skills/tanstack-store Command: npx skills add https://github.com/firstaxel/neon --skill tanstack-store-firstaxel
Store instances with setState updaters, subscriptions, and lifecycle callbacks like onUpdate and onSubscribe. - Computed Values & Side Effects: Build Derived chains for filter-sort-paginate pipelines and Effect instances with cleanup functions for timers and listeners. - Framework Adapters: Connect stores to React via useStore with selectors and shallow equality, or to Vue, Solid, Angular, and Svelte through their respective adapter packages. - Use Case: A React dashboard needs filtered, sorted, paginated data that updates when any control changes. Define a data store plus chained Derived instances, then subscribe components with useStore selectors so only affected parts re-render. ## Quick Start Set up a TanStack Store counter with a derived doubled value and connect it to a React component using useStore.High-intent search queries and answers about installing and using this skill.
Create a store by instantiating `new Store(initialState)` from @tanstack/store, then update it immutably with `store.setState((prev) => newValue)`. Subscribe to changes with `store.subscribe(listener)` and call the returned function to unsubscribe.
Install @tanstack/react-store and call `useStore(store, selector)` inside components to subscribe to state. Pass a selector to limit re-renders, and use the `shallow` equality function when the selector returns objects or arrays.
Derived instances do not activate until you call `mount()` on them. Store the returned unmount function and call it during cleanup, such as in a React useEffect return, to avoid memory leaks.
Yes, framework adapters exist for each: @tanstack/vue-store returns a computed ref, @tanstack/solid-store returns a signal, @tanstack/angular-store provides injectStore, and @tanstack/svelte-store integrates with $state.
Use `batch` when applying multiple related setState updates that should notify subscribers only once. Wrapping updates in `batch(() => { ... })` ensures listeners fire a single time with the final combined state.
yuma588Scaffold projects and generate components for React, Vue, Angular, and Svelte.
FutureAtomsConfigure Zustand and TanStack Query for React Native state management.
exceptionlessManage server state and data fetching in Svelte with TanStack Query.
MinhAnh-CorpProvide structured React state management patterns for local, global, and server state.