import { useState } from 'react'

// ✓ Local state — perfect use case for useState
function Accordion({ title, children }) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setIsOpen(o => !o)}>
        {title} {isOpen ? '▲' : '▼'}
      </button>
      {isOpen && <div>{children}</div>}
    </div>
  )
}

// ✓ Multiple related fields → useReducer keeps them consistent
function LoginForm() {
  const [form, dispatch] = useReducer(
    (state, action) => ({ ...state, ...action }),
    { email: '', password: '', isSubmitting: false }
  )

  return (
    <form>
      <input
        value={form.email}
        onChange={e => dispatch({ email: e.target.value })}
      />
      <input
        type="password"
        value={form.password}
        onChange={e => dispatch({ password: e.target.value })}
      />
    </form>
  )
}

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

// ✓ TanStack Query handles: loading, error, caching, deduplication,
//   background refetch, stale-while-revalidate, and pagination
function UserList() {
  const { data: users, isLoading, isError } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 60_000,   // consider data fresh for 1 minute
  })

  if (isLoading) return <p>Loading…</p>
  if (isError)   return <p>Error loading users</p>

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  )
}

// Mutations invalidate the cache and trigger a refetch automatically
function AddUserButton() {
  const queryClient = useQueryClient()
  const mutation = useMutation({
    mutationFn: (user) => fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(user),
    }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] })
    },
  })

  return (
    <button onClick={() => mutation.mutate({ name: 'New User' })}>
      Add User
    </button>
  )
}

import { create } from 'zustand'

// ✓ Zustand — minimal, no boilerplate, selector-based subscriptions
const useAppStore = create(set => ({
  user: null,
  theme: 'light',
  notifications: [],

  setUser:   user  => set({ user }),
  setTheme:  theme => set({ theme }),
  addNotification: (msg) => set(state => ({
    notifications: [...state.notifications, { id: Date.now(), msg }],
  })),
  dismissNotification: (id) => set(state => ({
    notifications: state.notifications.filter(n => n.id !== id),
  })),
}))

// Components only subscribe to what they need
function UserAvatar() {
  const user = useAppStore(state => state.user)
  return user ? <img src={user.avatarUrl} alt={user.name} /> : null
}

function ThemeToggle() {
  const theme    = useAppStore(state => state.theme)
  const setTheme = useAppStore(state => state.setTheme)
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      {theme === 'light' ? '🌙' : '☀️'}
    </button>
  )
}

// ✗ The kitchen-sink Redux store — antipattern
const store = {
  // Global client state (fine for Redux)
  user: null,
  theme: 'light',

  // Server state (should be in TanStack Query)
  users: [],
  usersLoading: false,
  usersError: null,
  usersLastFetched: null,

  // UI state (should be useState in the component)
  isModalOpen: false,
  activeTab: 'overview',
  searchQuery: '',
}

// ✓ Each in its natural home
// useState    → isModalOpen, activeTab, searchQuery
// TanStack Q  → users (with built-in loading/error/cache)
// Zustand     → user, theme (true global client state)

Is this state needed by only 1 component?
  └─ YES → useState / useReducer inside the component

Is this data fetched from a server (async)?
  └─ YES → TanStack Query or SWR

Is this state needed by many components across the tree,
and it changes infrequently (theme, locale, auth)?
  └─ YES → React Context

Is this state needed by many components and changes frequently?
  └─ YES → Zustand or Jotai

Do you need time-travel debugging, strict action contracts,
complex middleware, or enterprise team conventions?
  └─ YES → Redux Toolkit