Frontend State

前端状态管理

Zustand

import { create } from 'zustand';

interface CounterStore {
  count: number;
  inc: () => void;
}

const useStore = create((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, inc } = useStore();
  return {count};
}

Jotai

import { atom } from 'jotai';
import { useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return  setCount(c => c + 1)}>{count};
}

TanStack Query

import { useQuery, useMutation } from '@tanstack/react-query';

function UserList() {
  const { data, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json())
  });
  
  if (isLoading) return ;
  return ;
}

选择指南

• Zustand: 简单、轻量
• Jotai: 原子化、适合复杂状态
• TanStack Query: 服务端状态、缓存

参考

• .cursor/rules/react.mdc

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: awesome-ai-dev
• Source: awesome-ai-dev/awesome-ai-dev
• License: MIT

Install and usage instructions live in the source repository linked above.