ReactのState管理2026: Reduxの先へ

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

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

export function UserProfile({ userId }: { userId: string }) {
  const queryClient = useQueryClient();

  const { data: user, isLoading, error } = useQuery<User>({
    queryKey: ['users', userId],
    queryFn: async () => {
      const res = await fetch(`/api/users/${userId}`);
      if (!res.ok) throw new Error('Network failure');
      return res.json();
    },
    staleTime: 1000 * 60 * 5, // Cache stays fresh for 5 minutes
  });

  const mutation = useMutation({
    mutationFn: async (newName: string) => {
      const res = await fetch(`/api/users/${userId}`, {
        method: 'PATCH',
        body: JSON.stringify({ name: newName }),
      });
      return res.json();
    },
    onSuccess: () => {
      // Automatically invalidates and triggers background refetch
      queryClient.invalidateQueries({ queryKey: ['users', userId] });
    },
  });

  if (isLoading) return <div className="animate-pulse h-10 bg-slate-100 rounded" />;
  if (error) return <p className="text-red-500">Failed to load user</p>;

  return (
    <div>
      <h2 className="text-xl font-bold">{user?.name}</h2>
      <button 
        className="px-3 py-1 bg-blue-600 text-white rounded"
        onClick={() => mutation.mutate('Updated Name')}
      >
        Update Name
      </button>
    </div>
  );
}

// React 19 Native Action State
import { useActionState, useOptimistic } from 'react';
import { updateUserAction } from '@/actions/user';

export function InlineUserEditor({ initialName }: { initialName: string }) {
  const [state, formAction, isPending] = useActionState(updateUserAction, { name: initialName });
  const [optimisticName, setOptimisticName] = useOptimistic(
    state.name,
    (current, update: string) => update
  );

  return (
    <form action={async (formData: FormData) => {
      const newName = formData.get('name') as string;
      setOptimisticName(newName); // Instant zero-lag UI feedback
      await formAction(formData);
    }}>
      <input defaultValue={optimisticName} name="name" className="border p-2 rounded" />
      <button disabled={isPending} type="submit" className="ml-2 btn-primary">
        {isPending ? 'Saving...' : 'Save'}
      </button>
    </form>
  );
}

// store/useEditorStore.ts
import { create } from 'zustand';

interface EditorState {
  activeTool: 'select' | 'draw' | 'erase';
  zoom: number;
  selectedElementId: string | null;
  setTool: (tool: 'select' | 'draw' | 'erase') => void;
  setZoom: (delta: number) => void;
}

export const useEditorStore = create<EditorState>((set) => ({
  activeTool: 'select',
  zoom: 1.0,
  selectedElementId: null,
  setTool: (activeTool) => set({ activeTool }),
  setZoom: (delta) => set((state) => ({ zoom: Math.max(0.2, state.zoom + delta) })),
}));

// Component only re-renders when zoom changes:
export function ZoomIndicator() {
  const zoom = useEditorStore((state) => state.zoom);
  return <span>{(zoom * 100).toFixed(0)}%</span>;
}

import { atom, useAtom } from 'jotai';

// Primitive atom
export const countAtom = atom(0);

// Derived atom (computed automatically)
export const doubleCountAtom = atom((get) => get(countAtom) * 2);

export function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubleCount] = useAtom(doubleCountAtom);

  return (
    <div>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <p>Base: {count} | Double: {doubleCount}</p>
    </div>
  );
}

import { signal } from '@preact/signals-react';

const mouseX = signal(0);
const mouseY = signal(0);

window.addEventListener('mousemove', (e) => {
  mouseX.value = e.clientX;
  mouseY.value = e.clientY;
});

export function MouseCoordinates() {
  // Only the text node updates—component does NOT re-render!
  return <div>X: {mouseX} | Y: {mouseY}</div>;
}