React: Hooks, State, Context and JSX Reference Guide

# New app — Vite is the default starter
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install && npm run dev

# Or use a meta-framework
npm create next-app@latest my-app          # Next.js
npm create remix@latest my-app             # Remix / React Router

# Add packages you'll reach for daily
npm install @tanstack/react-query          # server state
npm install zustand                        # local global state
npm install react-hook-form zod            # forms + validation
npm install -D vitest @testing-library/react @testing-library/user-event

# Type-check + lint (TS projects)
npx tsc --noEmit
npx eslint . --fix

import { useState, type ReactNode } from "react";

type ButtonProps = {
  onClick:  () => void;
  variant?: "primary" | "ghost";
  disabled?: boolean;
  children: ReactNode;
};

export function Button({
  onClick, variant = "primary", disabled = false, children,
}: ButtonProps) {
  return (
    
      {children}
    
  );
}

// Composition + state
export function Counter() {
  const [count, setCount] = useState(0);
  return (
    

      
Count: {count}
       setCount(c => c + 1)}>Increment
       setCount(0)}>Reset
    
  );
}

import { useState, useEffect, useRef, useMemo, useCallback, useReducer } from "react";

// State
const [count, setCount] = useState(0);
setCount(c => c + 1);                         // functional updater — safer in async paths

// Effects — run after commit; cleanup on unmount or dep change
useEffect(() => {
  const ctrl = new AbortController();
  fetch("/api/x", { signal: ctrl.signal }).then(/* ... */);
  return () => ctrl.abort();                  // cleanup
}, [/* deps */]);

// Refs — mutable, no re-render
const inputRef = useRef(null);
inputRef.current?.focus();

// Memoisation — only if profiler shows the cost
const sorted   = useMemo(() => items.toSorted(byName), [items]);
const onSubmit = useCallback((v: string) => save(v), [save]);

// Reducer — when several state fields change together
type State = { items: string[]; loading: boolean };
type Action =
  | { type: "load" }
  | { type: "loaded"; items: string[] };

function reducer(s: State, a: Action): State {
  switch (a.type) {
    case "load":   return { ...s, loading: true };
    case "loaded": return { items: a.items, loading: false };
  }
}
const [state, dispatch] = useReducer(reducer, { items: [], loading: false });

// react-hook-form + zod — the modern default
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const Schema = z.object({
  email: z.string().email(),
  age:   z.number().int().min(13),
});
type FormValues = z.infer;

export function SignupForm() {
  const {
    register, handleSubmit, formState: { errors, isSubmitting },
  } = useForm({ resolver: zodResolver(Schema) });

  const onSubmit = handleSubmit(async (data) => {
    await fetch("/api/signup", { method: "POST", body: JSON.stringify(data) });
  });

  return (
    

      
      {errors.email && 
{errors.email.message}
}

      
      {errors.age && 
{errors.age.message}
}

      Sign up
    
  );
}

// End-to-end: data fetching with Suspense + error boundary + react-query.
import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
import {
  QueryClient, QueryClientProvider, useSuspenseQuery,
} from "@tanstack/react-query";

const qc = new QueryClient({ defaultOptions: { queries: { staleTime: 30_000 } } });

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

function UserCard({ id }: { id: number }) {
  const { data } = useSuspenseQuery({
    queryKey: ["user", id],
    queryFn:  async ({ signal }) => {
      const r = await fetch(`/api/users/${id}`, { signal });
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      return r.json();
    },
  });
  return 
Hi, {data.name}
;
}

export function App() {
  return (
    
      Something broke.
}>
        Loading…
}>
          
        
      
    
  );
}