# Migrate State Management

Moves Redux or Context state into React Query, nuqs or Zustand by type.

- Repository: https://github.com/SigNoz/signoz (32495 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add SigNoz/signoz --skill migrate-state-management -g -a claude-code -y`
Codex: `npx skills add SigNoz/signoz --skill migrate-state-management -g -a codex -y`
Cursor: `npx skills add SigNoz/signoz --skill migrate-state-management -g -a cursor -y`
Gemini CLI: `npx skills add SigNoz/signoz --skill migrate-state-management -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:**

1. Find where the data is fetched (existing `useQuery`/API call) and where it is dispatched or set in Context/Redux.
2. Remove the dispatch/set that writes API results into Redux/Context.
3. Expose a single hook that uses the query and returns the same shape consumers expect (use `useMemo` for derived objects like `configs` to avoid unnecessary re-renders).
4. Replace Redux/Context consumption with the new hook. Prefer generated React Query hooks from `frontend/src/api/generated` when available.
5. Configure cache/refetch (e.g. `refetchOnMount: false`, `staleTime`) so behavior matches previous “single source” expectations.

**Before (Redux mirroring React Query):**

The rest: https://github.com/SigNoz/signoz/blob/HEAD/frontend/.cursor/skills/migrate-state-management/SKILL.md