React: a complete overview, pros, cons and limits

import { useState } from 'react';

type Product = { id: number; name: string; price: number; inStock: boolean };

// a component is a function: props in, markup out
export function ProductCard({ product }: { product: Product }) {
  const [qty, setQty] = useState(1);

  return (
    <article className="card">
      <h3>{product.name}</h3>
      <p>Price: {product.price * qty}</p>
      {product.inStock ? (
        <button onClick={() => setQty(qty + 1)}>Add one more ({qty})</button>
      ) : (
        <p>Out of stock</p>
      )}
    </article>
  );
}

import { useActionState } from 'react';

type State = { ok: boolean; message: string };

// React 19 Actions: the form sends itself, and the state of the request comes back
async function subscribe(_prev: State, form: FormData): Promise<State> {
  const email = String(form.get('email') ?? '');
  if (!email.includes('@')) return { ok: false, message: 'Check the email' };
  // here — a request to your server
  return { ok: true, message: 'Done, thank you!' };
}

export function SubscribeForm() {
  const [state, action, pending] = useActionState(subscribe, { ok: false, message: '' });

  return (
    <form action={action}>
      <input name="email" type="email" placeholder="[email protected]" required />
      <button disabled={pending}>{pending ? 'Sending…' : 'Subscribe'}</button>
      {state.message && <p role="status">{state.message}</p>}
    </form>
  );
}

import { useEffect, useState } from 'react';

// a custom hook: reusable logic with its own state, typed by the value
export function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const saved = typeof window === 'undefined' ? null : localStorage.getItem(key);
    return saved === null ? initial : (JSON.parse(saved) as T);
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

// any component can use it: the theme survives a page reload
export function ThemeSwitch() {
  const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light');
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Theme: {theme}
    </button>
  );
}