Migrate State Management
Moves Redux or Context state into React Query, nuqs or Zustand by type.
Install
npx skills add SigNoz/signoz --skill migrate-state-management -g -a claude-code -y- Repository
- SigNoz/signoz32.5k
- Category
- Engineering
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 1,615 tokens
- Runs scripts
- No, instructions only
What it does
Migrate Redux or React Context to the correct state option (React Query for server state, nuqs for URL/shareable state, Zustand for global client state). Use when refactoring away from Redux/Context, moving state to the right store, or when the user asks to migrate state management.
Migrate State: Redux/Context → React Query, nuqs, Zustand
Do not introduce or recommend Redux or React Context. Migrate existing usage to the stack below.
1. Classify the state
Before changing code, classify what the state represents:
| If the state is… | Migrate to | Do not use |
|---|---|---|
| From API / server (versions, configs, fetched lists, time-series) | React Query | Redux, Context |
| Shareable via URL (filters, time range, page, selected ids) | nuqs | Redux, Context |
| Global/client UI (dashboard lock, query builder, feature flags, large client objects) | Zustand | Redux, Context |
| Local to one component (inputs, toggles, hover) | useState / useReducer | Zustand, Redux, Context |
If one slice mixes concerns (e.g. Redux has both API data and pagination), split: API → React Query, pagination → nuqs, rest → Zustand or local state.
2. Migrate to React Query (server state)
When: State comes from or mirrors an API response (e.g. currentVersion, latestVersion, configs, lists).
Steps:
- Find where the data is fetched (existing
useQuery/API call) and where it is dispatched or set in Context/Redux. - Remove the dispatch/set that writes API results into Redux/Context.
- Expose a single hook that uses the query and returns the same shape consumers expect (use
useMemofor derived objects likeconfigsto avoid unnecessary re-renders). - Replace Redux/Context consumption with the new hook. Prefer generated React Query hooks from
frontend/src/api/generatedwhen available. - Configure cache/refetch (e.g.
refetchOnMount: false,staleTime) so behavior matches previous “single source” expectations.
Before (Redux mirroring React Query):
