Data and State

import { useEffect, useState } from "react";

type User = { id: number; name: string };

export function UserName({ userId }: { userId: number }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/users/${userId}`, { signal: controller.signal })
      .then((res) => res.json() as Promise<User>)
      .then(setUser)
      .catch((err) => {
        if (err.name !== "AbortError") console.error(err); // ignore aborts
      });
    return () => controller.abort();
  }, [userId]);

  return <span>{user ? user.name : "Loading…"}</span>;
}

Caching, retries, loading and error states and background refetching are hard to get right by hand, so real apps often use TanStack Query. Wrap the app in QueryClientProvider in main.tsx, then:

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

type Todo = { id: number; title: string };

export function Todos() {
  const queryClient = useQueryClient();
  const { data, isPending, error } = useQuery({
    queryKey: ["todos"],
    queryFn: async (): Promise<Todo[]> => (await fetch("/api/todos")).json(),
  });
  const addTodo = useMutation({
    mutationFn: (title: string) =>
      fetch("/api/todos", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title }),
      }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["todos"] }),
  });

  if (isPending) return <p>Loading…</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <>
      <ul>{data.map((t) => <li key={t.id}>{t.title}</li>)}</ul>
      <button onClick={() => addTodo.mutate("New task")}>Add</button>
    </>
  );
}

Handling forms

Controlled components bind an input's value to state, which helps when validating on every keystroke. Current React also accepts a function in <form action={...}>, with useActionState reporting the result and pending state.

import { useActionState } from "react";

type State = { error: string | null };

async function subscribe(_prev: State, formData: FormData): Promise<State> {
  const email = String(formData.get("email") ?? "");
  if (!email.includes("@")) return { error: "Please enter a valid email." };
  await fetch("/api/subscribe", { method: "POST", body: formData });
  return { error: null };
}

export function SubscribeForm() {
  const [state, formAction, isPending] = useActionState(subscribe, { error: null });
  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <button disabled={isPending}>{isPending ? "Sending…" : "Subscribe"}</button>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

For large forms with complex validation, React Hook Form is a good companion.

Summary

• Lift shared state up to the closest common parent.
• Use context for deeply shared values and useReducer for complex updates.
• Abort effect-based fetches in cleanup, or use TanStack Query.
• Handle forms with controlled inputs or form actions plus useActionState.