React

function Counter() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount((c) => c + 1);
    console.log(count);
  }
  return <button onClick={handleClick}>{count}</button>;
}

function Search({ query }: { query: string }) {
  const [results, setResults] = useState<Item[]>([]);
  useEffect(() => {
    fetch(`/api/search?q=${query}`)
      .then((r) => r.json())
      .then(setResults);
  }, [query]);
  return <List items={results} />;
}

function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setSeconds(seconds + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <p>{seconds}</p>;
}

type State = { error?: string; ok?: boolean };

async function saveEmail(_prev: State, formData: FormData): Promise<State> {
  const email = String(formData.get('email'));
  const res = await fetch('/api/profile', { method: 'POST', body: JSON.stringify({ email }) });
  if (res.status === 422) return { error: 'Email is invalid' };
  return { ok: true };
}

function EmailForm() {
  const [state, formAction, isPending] = useActionState(saveEmail, {});
  return (
    <form action={formAction}>
      <input name="email" defaultValue="" />
      <button disabled={isPending}>{isPending ? 'Saving…' : 'Save'}</button>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

function Comments({ comments, send }: { comments: Comment[]; send: (t: string) => Promise<void> }) {
  const [optimistic, addOptimistic] = useOptimistic(
    comments,
    (list, text: string) => [...list, { id: 'temp', text, pending: true }],
  );
  async function action(formData: FormData) {
    const text = String(formData.get('text'));
    addOptimistic(text);
    await send(text); // throws → optimistic comment disappears
  }
  return (
    <form action={action}>
      {optimistic.map((c) => <p key={c.id} style={{ opacity: c.pending ? 0.5 : 1 }}>{c.text}</p>)}
      <input name="text" />
    </form>
  );
}

function ColorPicker({ children }: { children: React.ReactNode }) {
  const [color, setColor] = useState('red');
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      {children /* not re-rendered when color changes */}
    </div>
  );
}
// <ColorPicker><ExpensiveTree /></ColorPicker>

function useOnline() {
  return useSyncExternalStore(
    (cb) => {
      window.addEventListener('online', cb);
      window.addEventListener('offline', cb);
      return () => { window.removeEventListener('online', cb); window.removeEventListener('offline', cb); };
    },
    () => navigator.onLine,
    () => true, // server snapshot
  );
}

render(<LoginForm />);
await userEvent.type(screen.getByLabelText(/email/i), 'a@b.co');
await userEvent.click(screen.getByRole('button', { name: /sign in/i }));
expect(await screen.findByRole('alert')).toHaveTextContent(/invalid password/i);

function Todos() {
  const [todos, setTodos] = useState<Todo[]>([]);
  function add(title: string) {
    todos.push({ id: crypto.randomUUID(), title });
    setTodos(todos);
    console.log(todos.length); // increases
  }
  return <TodoList items={todos} onAdd={add} />;
}

function Report({ filters }: { filters: Filters }) {
  const [data, setData] = useState<Row[]>([]);
  const query = { ...filters, page: 1 };

  useEffect(() => {
    fetchReport(query).then(setData);
  }, [query]);

  const [total, setTotal] = useState(0);
  setTotal(data.length);

  return <Table rows={data} />;
}

function ChatRoom({ roomId, muted }: { roomId: string; muted: boolean }) {
  const onMessage = useEffectEvent((msg: Message) => {
    if (!muted) playSound();
    addMessage(msg);
  });
  useEffect(() => {
    const conn = connect(roomId);
    conn.on('message', onMessage);
    return () => conn.close();
  }, [roomId]); // muted changes do NOT reconnect
}

const Row = memo(function Row({ item, onSelect, style }: RowProps) {
  return <li style={style} onClick={() => onSelect(item.id)}>{item.name}</li>;
});

function List({ items }: { items: Item[] }) {
  const [selected, setSelected] = useState<string | null>(null);
  const handleSelect = useCallback((id: string) => {
    setSelected(id);
    track('select', { id, previous: selected });
  }, [selected]);

  return (
    <ul>
      {items.map((item) => (
        <Row key={item.id} item={item} onSelect={handleSelect} style={{ padding: 8 }} />
      ))}
    </ul>
  );
}

server.use(
  http.get('/api/orders', () => HttpResponse.json({ message: 'boom' }, { status: 500 })),
);
render(<Orders />, { wrapper: Providers });
expect(await screen.findByRole('alert')).toHaveTextContent(/could not load orders/i);