Cara Streamline Frontend State Management dengan Claude Code

設計にClaude Codeが役立つ理由 状態manajemen

frontend 状態manajemen 、aplikasi kompleksさ 応じてアプローチ 変えるdiperlukan あり.Claude Code proyek全体 状態 流れ 理解 上 、tepatなlibrary 選定 dan 設計pola 提案 bisa dilakukan.

Zustandによる状態manajemen

軽量 学習コスト 低いZustand 、多く proyek 採用されてい.

> Zustand dengan 認証状態 dan pengguna情報 manajemenするstore buatkan.
> ローカルstorageへ persistensi implementasikan juga.

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface User {
  id: string;
  name: string;
  email: string;
}

interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  updateProfile: (data: Partial<User>) => void;
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set, get) => ({
      user: null,
      token: null,
      isAuthenticated: false,

      login: async (email, password) => {
        const res = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password }),
        });
        if (!res.ok) throw new Error('Login failed');

        const { user, token } = await res.json();
        set({ user, token, isAuthenticated: true });
      },

      logout: () => {
        set({ user: null, token: null, isAuthenticated: false });
      },

      updateProfile: (data) => {
        const current = get().user;
        if (current) {
          set({ user: { ...current, ...data } });
        }
      },
    }),
    {
      name: 'auth-storage',
      partialize: (state) => ({
        user: state.user,
        token: state.token,
        isAuthenticated: state.isAuthenticated,
      }),
    }
  )
);

manajemen（TanStack Queryintegrasi） 非同期データ

> TanStack Query dengan 商品daftar フェッチ、cache、楽観的pembaruan implementasikan.

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

interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
}

// 商品daftar pengambilan
export function useProducts(page: number = 1) {
  return useQuery({
    queryKey: ['products', page],
    queryFn: async () => {
      const res = await fetch(`/api/products?page=${page}`);
      return res.json() as Promise<{ items: Product[]; total: number }>;
    },
    staleTime: 5 * 60 * 1000, // 5分間cache
  });
}

// 商品 pembaruan（楽観的pembaruan）
export function useUpdateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async ({ id, data }: { id: string; data: Partial<Product> }) => {
      const res = await fetch(`/api/products/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      return res.json() as Promise<Product>;
    },

    onMutate: async ({ id, data }) => {
      await queryClient.cancelQueries({ queryKey: ['products'] });
      const previous = queryClient.getQueryData(['products']);

      queryClient.setQueriesData(
        { queryKey: ['products'] },
        (old: { items: Product[]; total: number } | undefined) => {
          if (!old) return old;
          return {
            ...old,
            items: old.items.map(p =>
              p.id === id ? { ...p, ...data } : p
            ),
          };
        }
      );

      return { previous };
    },

    onError: (_err, _vars, context) => {
      if (context?.previous) {
        queryClient.setQueryData(['products'], context.previous);
      }
    },

    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });
}

Jotaiによるアトミックな状態manajemen

> Jotai dengan temapengaturan dan sidebar 開閉状態 manajemenするアトム buatkan.

import { atom, useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';

// tema 状態（ローカルstorage persistensi）
export const themeAtom = atomWithStorage<'light' | 'dark'>('theme', 'light');

// sidebar 開閉状態
export const sidebarOpenAtom = atom(true);

// 派生アトム：tema 応じたCSSclass
export const themeClassAtom = atom((get) => {
  const theme = get(themeAtom);
  return theme === 'dark' ? 'dark bg-gray-900 text-white' : 'bg-white text-gray-900';
});

// komponen penggunaan例
function ThemeToggle() {
  const [theme, setTheme] = useAtom(themeAtom);

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
    </button>
  );
}

選定 状態manajemenlibrary

Claude Code proyek 合った状態manajemenlibrary 選定 依頼 bisa dilakukan.

> こ proyek 状態manajemen ついて分析して。
> 現在 Context API 使い方 評価して、
> よりtepatなlibrary あれば移行プラン 提案して。

library	適 ケース
useState/useReducer	komponenローカルな状態
Zustand	グローバルな状態、シンプルなAPI
Jotai	細粒度 リアクティブ状態
TanStack Query	server状態 cachemanajemen
Redux Toolkit	大規模aplikasi、kompleksなビジネスロジック

Summary

Dengan Claude Code, proyek 要件 合った状態manajemenpola 選定 dari implementasiま efisien 進められ.プロンプト aplikasi struktur dan 要件 spesifik 伝えるこ dan penting.効果的なプロンプト 書き方 プロンプトテクニック完全panduan silakan lihat.Selain itu生産性 3倍 Tips frontendpengembangan全般 efisiensiテクニック juga perkenalan い.

Untuk detail Claude Code, lihat Dokumentasi Resmi Anthropic.