在 Cursor 中开发 React 项目时，状态管理更推荐按照职责进行分层：服务端状态交给 React Query 处理，并提前定义 schema 或使用 Zod 类型，同时配置好 staleTime；跨组件共享状态适合用 Zustand 管理，需要显式声明泛型并按需解构；如果涉及派生状态计算，则可使用 Jotai，但 atom 必须定义在模块顶层。
在 Cursor 中开发 React 项目时，状态管理不仅要考虑编辑器智能提示和实时预览体验，还要兼顾代码维护性与类型安全，不能仅依赖 useState 进行硬编码式堆叠。
用React Query管理服务端状态
React Query 适用于所有包含 API 请求的场景，例如用户列表加载、表单提交后的数据刷新等。Cursor 能自动推断 useQuery 的返回类型，但前提是要先定义 schema，或使用 Zod 生成对应的 type。
第一步：执行npm install @tanstack/react-query → 在src/main.tsx或入口文件中包裹QueryClientProvider。
第二步：创建src/lib/queryClient.ts，写入export const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 } } });。这里建议将staleTime设置为60秒，以减少短时间内的重复请求，【如果不设置，下拉刷新时可能触发两次相同请求】。
第三步：在组件内直接用const { data } = useQuery({ queryKey: ['users'], queryFn: fetchUsers })。Cursor 会自动识别 fetchUsers 的返回类型，但前提是该函数已经声明明确的 return type，或补充了 TS JSDoc 注释。
用Zustand管理跨组件共享状态
相比 Context API 更轻量，相比 Redux 更易上手，而且 Cursor 对 store 中 action 的自动补全和类型提示表现也非常出色。
做法一是先完成 store 的安装与初始化：执行npm install zustand，然后新建 src/store/userStore.ts，并写入create。这里必须明确声明泛型
方法二：在组件中调用const { name, updateName } = useUserStore((s) => ({ name: s.name, updateName: s.updateName }))。注意应按需解构，不要写useUserStore((s) => s)，否则 Cursor 可能失去对具体字段的跳转与识别支持。
用Jotai管理局部派生状态
当项目中需要基于已有状态动态计算新值时，例如筛选后的商品列表、结合搜索词的计数结果，Jotai 的 atomFamily 和 derived atom 往往比 useState + useEffect 更稳定、更可靠。
安装依赖：npm install jotai。
定义一个派生atom：const filteredItemsAtom = atom((get) => get(itemsAtom).filter(item => item.name.includes(get(searchTermAtom))))。这段代码必须放在模块顶层，【不能放在组件内部或useCallback里，否则每次渲染都会新建atom，进而导致状态丢失】。
在组件中读取：const filteredItems = useAtomValue(filteredItemsAtom)。Cursor 会自动将 filteredItemsAtom 标记为“derived”，点击后可直接跳转到定义位置。