import { useState, useTransition } from 'react'

function SearchPage() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<Product[]>([])
  const [isPending, startTransition] = useTransition()

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    // Urgent: update the input immediately — the user must see their keystroke
    setQuery(e.target.value)

    // Transition: computing results is non-urgent — can be interrupted
    startTransition(() => {
      setResults(filterProducts(allProducts, e.target.value))
    })
  }

  return (
    <>
      <input value={query} onChange={handleSearch} placeholder="Search..." />
      {isPending && <span>Updating results...</span>}
      <ProductGrid products={results} />
    </>
  )
}

import { useState, useDeferredValue, useMemo } from 'react'

function SearchResults({ query }: { query: string }) {
  // The deferred value lags behind `query` by one render cycle during transitions
  const deferredQuery = useDeferredValue(query)

  // This expensive computation runs with the *deferred* value — not the latest one
  const results = useMemo(
    () => filterProducts(allProducts, deferredQuery),
    [deferredQuery]  // only runs when deferredQuery changes
  )

  // Visual feedback: results are slightly stale while the user is typing fast
  const isStale = query !== deferredQuery

  return (
    <div style={{ opacity: isStale ? 0.7 : 1 }}>
      {results.map((p) => <ProductCard key={p.id} product={p} />)}
    </div>
  )
}

import { useSyncExternalStore } from 'react'

// Custom store (simplified Zustand-like implementation)
function createExternalStore<T>(initialState: T) {
  let state = initialState
  const listeners = new Set<() => void>()

  return {
    getState: () => state,
    setState: (updater: (s: T) => T) => {
      state = updater(state)
      listeners.forEach((l) => l())
    },
    subscribe: (listener: () => void) => {
      listeners.add(listener)
      return () => listeners.delete(listener)
    },
  }
}

const store = createExternalStore({ count: 0 })

function Counter() {
  // useSyncExternalStore guarantees no tearing:
  // - subscribe: called to register for updates
  // - getSnapshot: called synchronously to read current state
  const count = useSyncExternalStore(
    store.subscribe,
    store.getState,  // client snapshot
    () => 0          // server snapshot (for SSR)
  )
  return <span>{count}</span>
}

import { useOptimistic, useTransition } from 'react'

type Message = { id: string; text: string; sending?: boolean }

function ChatThread({ messages }: { messages: Message[] }) {
  const [, startTransition] = useTransition()

  // useOptimistic takes the current state and a merge function
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (currentMessages: Message[], newMessage: Message) => [
      ...currentMessages,
      { ...newMessage, sending: true },  // flag as pending
    ]
  )

  const sendMessage = async (text: string) => {
    const tempMessage = { id: crypto.randomUUID(), text }

    startTransition(() => {
      // Immediately add the optimistic message to the list
      addOptimisticMessage(tempMessage)
    })

    // Actual network call — when it resolves, React replaces the optimistic state
    // with the server-confirmed state. On error, optimistic state is rolled back.
    await postMessage(text)
  }

  return (
    <ul>
      {optimisticMessages.map((msg) => (
        <li key={msg.id} style={{ opacity: msg.sending ? 0.6 : 1 }}>
          {msg.text}
        </li>
      ))}
    </ul>
  )
}

import { useActionState } from 'react'
import { submitContactForm } from '@/app/actions'

function ContactForm() {
  const [state, action, isPending] = useActionState(submitContactForm, null)

  return (
    <form action={action}>
      <input name="email" required />
      <textarea name="message" required />
      {state?.error && <p>{state.error}</p>}
      {state?.success && <p>Message sent!</p>}
      <button type="submit" disabled={isPending}>
        {isPending ? 'Sending...' : 'Send'}
      </button>
    </form>
  )
}

import { createMachine, assign } from 'xstate'

// Checkout flow — hierarchical states with parallel billing/shipping validation
const checkoutMachine = createMachine({
  id: 'checkout',
  initial: 'cart',
  context: { items: [], shippingAddress: null, paymentMethod: null },

  states: {
    cart: {
      on: {
        PROCEED: 'shipping',
        ADD_ITEM: { actions: assign({ items: ({ context, event }) => [...context.items, event.item] }) },
      },
    },

    shipping: {
      initial: 'editing',
      states: {
        editing: {
          on: {
            SUBMIT_ADDRESS: { target: 'validating', actions: assign({ shippingAddress: ({ event }) => event.address }) },
          },
        },
        validating: {
          // invoke runs an async service — transitions on done/error
          invoke: {
            src: 'validateAddress',
            onDone: { target: 'valid' },
            onError: { target: 'editing' },
          },
        },
        valid: { type: 'final' },
      },
      onDone: 'payment',  // when sub-machine reaches final state, proceed
      on: { BACK: 'cart' },
    },

    payment: {
      on: {
        SUBMIT_PAYMENT: 'confirming',
        BACK: 'shipping',
      },
    },

    confirming: {
      invoke: {
        src: 'processPayment',
        onDone: { target: 'success' },
        onError: { target: 'payment' },
      },
    },

    success: { type: 'final' },
  },
})

import { renderHook, act } from '@testing-library/react'
import { useCounter } from './useCounter'

describe('useCounter', () => {
  it('increments correctly', () => {
    const { result } = renderHook(() => useCounter(0))

    expect(result.current.count).toBe(0)

    act(() => {
      result.current.increment()
    })

    expect(result.current.count).toBe(1)
  })

  it('does not go below minimum', () => {
    const { result } = renderHook(() => useCounter(0, { min: 0 }))
    act(() => { result.current.decrement() })
    expect(result.current.count).toBe(0)
  })
})

import { http, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'
import { renderHook, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useUser } from './useUser'

const server = setupServer(
  http.get('/api/users/:id', ({ params }) => {
    return HttpResponse.json({ id: params.id, name: 'Alice', role: 'admin' })
  })
)

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

function createWrapper() {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },  // don't retry in tests
  })
  return ({ children }: { children: React.ReactNode }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  )
}

describe('useUser', () => {
  it('fetches and returns user data', async () => {
    const { result } = renderHook(() => useUser('123'), {
      wrapper: createWrapper(),
    })

    await waitFor(() => expect(result.current.isSuccess).toBe(true))

    expect(result.current.data?.name).toBe('Alice')
    expect(result.current.data?.role).toBe('admin')
  })

  it('handles 404 gracefully', async () => {
    server.use(
      http.get('/api/users/:id', () => HttpResponse.json(null, { status: 404 }))
    )

    const { result } = renderHook(() => useUser('nonexistent'), {
      wrapper: createWrapper(),
    })

    await waitFor(() => expect(result.current.isError).toBe(true))
  })
})

import { useAppStore } from './store'

afterEach(() => {
  // Reset to initial state after every test
  useAppStore.setState({ count: 0, theme: 'dark' })
})

describe('cart store', () => {
  it('adds an item', () => {
    const { addItem } = useAppStore.getState()
    addItem({ id: '1', name: 'Widget', price: 9.99 })
    expect(useAppStore.getState().items).toHaveLength(1)
  })
})