React interview questions

// Imperative, plain JavaScript: you change the DOM step by step
const button = document.querySelector("#like");
let likes = 0;
button.addEventListener("click", () => {
  likes += 1;
  button.textContent = `Likes: ${likes}`;
});

// Declarative, React: describe the UI for any value of likes, and React updates the DOM
function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(likes + 1)}>Likes: {likes}</button>;
}

import { useState } from "react";

function NameField() {
  const [name, setName] = useState("");
  return <input aria-label="Name" value={name} onChange={(e) => setName(e.target.value)} />;
}

export default function Form() {
  const [boxed, setBoxed] = useState(false);
  return (
    <>
      <button onClick={() => setBoxed(!boxed)}>Toggle box</button>
      {boxed ? <section><NameField /></section> : <div><NameField /></div>}
    </>
  );
}

const title = <h1 className="title">Hello, {name}</h1>;
const list = <><li>One</li><li>Two</li></>;

import { Fragment, jsx, jsxs } from "react/jsx-runtime";

const title = jsxs("h1", { className: "title", children: ["Hello, ", name] });
const list = jsxs(Fragment, { children: [jsx("li", { children: "One" }), jsx("li", { children: "Two" })] });

function Bad() {
  return <h1>Title</h1><p>Text</p>;    // a syntax error: two values
}

function Good() {
  return (
    <>
      <h1>Title</h1>
      <p>Text</p>
    </>
  );
}

import { useState } from "react";

function QuantityPicker({ quantity, onChange }) {        // props: read-only inputs
  return (
    <div>
      <button onClick={() => onChange(quantity - 1)} disabled={quantity === 1}>-</button>
      <span>{quantity}</span>
      <button onClick={() => onChange(quantity + 1)}>+</button>
    </div>
  );
}

export default function CartItem() {
  const [quantity, setQuantity] = useState(1);            // state: owned here
  return (
    <>
      <QuantityPicker quantity={quantity} onChange={setQuantity} />
      <p>Total: ₹{quantity * 499}</p>
    </>
  );
}

function Avatar({ name, size = 48 }) {          // the default lives in the destructuring
  return <img alt={name} width={size} height={size} src={`/avatars/${name}.png`} />;
}

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);    // set to 0 + 1
    setCount(count + 1);    // set to 0 + 1 again
    setCount(count + 1);    // and again
    console.log(count);     // 0: this render's snapshot
  }

  return <button onClick={handleClick}>{count}</button>;   // shows 1 after one click
}

function handleClick() {
  setCount((c) => c + 1);   // 0 → 1
  setCount((c) => c + 1);   // 1 → 2
  setCount((c) => c + 1);   // 2 → 3
}

import { useState } from "react";

const initial = [
  { id: "a1", name: "Asha" },
  { id: "r2", name: "Ravi" },
  { id: "p3", name: "Priya" },
];

export default function Guests() {
  const [guests, setGuests] = useState(initial);
  const remove = (id) => setGuests(guests.filter((g) => g.id !== id));

  return (
    <ul>
      {guests.map((guest, index) => (
        <li key={index}>                         {/* the bug: try key={guest.id} */}
          {guest.name} <input aria-label={`Note for ${guest.name}`} />
          <button onClick={() => remove(guest.id)}>Remove</button>
        </li>
      ))}
    </ul>
  );
}

import { useState } from "react";

export default function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState("");

  function addTodo(event) {
    event.preventDefault();                       // stop the form reloading the page
    const trimmed = text.trim();
    if (!trimmed) return;
    setTodos([...todos, { id: crypto.randomUUID(), text: trimmed, done: false }]);
    setText("");
  }

  function toggleTodo(id) {
    setTodos(todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  }

  function deleteTodo(id) {
    setTodos(todos.filter((t) => t.id !== id));
  }

  return (
    <div>
      <form onSubmit={addTodo}>
        <input aria-label="New todo" value={text} onChange={(e) => setText(e.target.value)} />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <label style={{ textDecoration: todo.done ? "line-through" : "none" }}>
              <input type="checkbox" checked={todo.done} onChange={() => toggleTodo(todo.id)} />
              {todo.text}
            </label>
            <button onClick={() => deleteTodo(todo.id)} aria-label={`Delete ${todo.text}`}>
              Delete
            </button>
          </li>
        ))}
      </ul>
      <p>{todos.filter((t) => !t.done).length} left</p>
    </div>
  );
}

import { useState } from "react";

let childRenders = 0;

function Child() {
  childRenders += 1;
  return <p>Child rendered {childRenders} times</p>;
}

export default function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Clicked {count}</button>
      <Child />                       {/* no props at all, yet it re-renders on every click */}
    </>
  );
}

import { useState } from "react";

const products = [
  { id: 1, name: "Steel Water Bottle", price: 399 },
  { id: 2, name: "Electric Kettle", price: 1299 },
  { id: 3, name: "Water Purifier", price: 8999 },
  { id: 4, name: "Notebook", price: 89 },
];

export default function ProductSearch() {
  const [query, setQuery] = useState("");

  const q = query.trim().toLowerCase();
  const visible = products.filter((p) => p.name.toLowerCase().includes(q));   // derived, not stored

  return (
    <div>
      <input
        type="search"
        aria-label="Search products"
        placeholder="Search products"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {visible.map((p) => (
          <li key={p.id}>{p.name} ₹{p.price}</li>
        ))}
      </ul>
      {visible.length === 0 && <p>No products match “{query}”.</p>}
    </div>
  );
}

const [visible, setVisible] = useState(products);
useEffect(() => {
  setVisible(products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase())));
}, [query]);

function CartSummary() {
  return <p>Your cart</p>;
}

export function Buggy({ cart }) {
  return <div>{cart.length && <CartSummary />}</div>;       // empty cart: shows "0"
}

export function Fixed({ cart }) {
  return <div>{cart.length > 0 && <CartSummary />}</div>;   // empty cart: shows nothing
}

import { useEffect, useState } from "react";

function OnlineStatus({ userId }) {
  const [online, setOnline] = useState(false);

  useEffect(() => {
    const connection = subscribeToStatus(userId, setOnline);   // set up
    return () => connection.unsubscribe();                     // clean up
  }, [userId]);           // re-run only when userId changes

  return <p>{online ? "Online" : "Offline"}</p>;
}

class OnlineStatusClass extends React.Component {
  state = { online: false };
  componentDidMount() {
    this.connection = subscribeToStatus(this.props.userId, (online) => this.setState({ online }));
  }
  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.connection.unsubscribe();
      this.connection = subscribeToStatus(this.props.userId, (online) => this.setState({ online }));
    }
  }
  componentWillUnmount() {
    this.connection.unsubscribe();
  }
  render() {
    return <p>{this.state.online ? "Online" : "Offline"}</p>;
  }
}

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p aria-live="polite">Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <button onClick={() => setCount((c) => Math.max(0, c - 1))} disabled={count === 0}>
        Decrement
      </button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export function StepCounter({ step = 1, max = 10 }) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => Math.min(max, c + step))} disabled={count >= max}>+{step}</button>
      <button onClick={() => setCount((c) => Math.max(0, c - step))} disabled={count === 0}>-{step}</button>
    </div>
  );
}

import { useRef } from "react";

export default function SearchBar() {
  const inputRef = useRef(null);
  return (
    <>
      <input ref={inputRef} aria-label="Search" />
      <button onClick={() => inputRef.current.focus()}>Focus search</button>
    </>
  );
}

import { useRef, useState } from "react";

export function ClickTracker() {
  const clicks = useRef(0);                    // survives re-renders, never causes one
  const [shown, setShown] = useState(0);

  return (
    <>
      <button onClick={() => { clicks.current += 1; }}>Click me</button>
      <button onClick={() => setShown(clicks.current)}>Show count</button>
      <p>Clicks so far: {shown}</p>
    </>
  );
}

function TextInput({ ref, ...props }) {          // React 19: no forwardRef needed
  return <input ref={ref} {...props} />;
}

import { useState } from "react";

export default function Shopping() {
  const [items, setItems] = useState(["Milk"]);

  function addBroken() {
    items.push("Bread");          // mutates the array React is holding
    setItems(items);              // same reference: React skips the update
  }

  function addFixed() {
    setItems([...items, "Eggs"]); // a new array: React re-renders
  }

  return (
    <>
      <button onClick={addBroken}>Add bread (broken)</button>
      <button onClick={addFixed}>Add eggs</button>
      <ul>{items.map((item, i) => <li key={i}>{item}</li>)}</ul>
    </>
  );
}

import { useEffect, useState } from "react";

export function BrokenTimer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setCount(count + 1), 1000);   // count is always 0 in here
    return () => clearInterval(id);
  }, []);

  return <p>{count}</p>;     // 1, forever
}

export function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setCount((c) => c + 1), 1000);   // no stale value to read
    return () => clearInterval(id);                                // stop on unmount
  }, []);

  return <p>{count}</p>;     // 1, 2, 3, 4, 5...
}

import { memo, useCallback, useMemo, useState } from "react";

const ProductRow = memo(function ProductRow({ product, onAdd }) {
  return (
    <li>
      {product.name} <button onClick={() => onAdd(product.id)}>Add</button>
    </li>
  );
});

export default function Catalogue({ products }) {
  const [query, setQuery] = useState("");
  const [cart, setCart] = useState([]);

  // useMemo: re-filter only when the products or the query change
  const visible = useMemo(
    () => products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase())),
    [products, query]
  );

  // useCallback: the same function on every render, so memo'd rows don't re-render
  const handleAdd = useCallback((id) => setCart((c) => [...c, id]), []);

  return (
    <>
      <input aria-label="Filter" value={query} onChange={(e) => setQuery(e.target.value)} />
      <p>{cart.length} in cart</p>
      <ul>
        {visible.map((p) => (
          <ProductRow key={p.id} product={p} onAdd={handleAdd} />
        ))}
      </ul>
    </>
  );
}

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext("light");          // the default, used with no provider above

function ThemeLabel() {
  const theme = useContext(ThemeContext);              // read it, however deep
  return <p>Current theme: {theme}</p>;
}

function Sidebar() {
  return <ThemeLabel />;                               // no theme prop passed through here
}

export default function App() {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext value={theme}>                       {/* React 19: the context is the provider */}
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Switch theme</button>
      <Sidebar />
    </ThemeContext>
  );
}

import { useState } from "react";

function Profile({ user }) {
  const [tab, setTab] = useState("posts");
  if (user) {
    const [following, setFollowing] = useState(false);   // inside a condition: breaks the rule
  }
  const [likes, setLikes] = useState(0);                 // its slot now depends on user
  return <h1>{user ? user.name : "Guest"}: {likes} likes</h1>;
}

function ProfileFixed({ user }) {
  const [tab, setTab] = useState("posts");
  const [following, setFollowing] = useState(false);     // always called, used only when needed
  const [likes, setLikes] = useState(0);
  return <h1>{user ? user.name : "Guest"}: {likes} likes</h1>;
}

import { useEffect, useState } from "react";

export function useFetch(url) {
  const [state, setState] = useState({ data: null, loading: true, error: null });

  useEffect(() => {
    const controller = new AbortController();
    setState({ data: null, loading: true, error: null });

    fetch(url, { signal: controller.signal })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);   // 404 and 500 don't reject on their own
        return res.json();
      })
      .then((data) => setState({ data, loading: false, error: null }))
      .catch((error) => {
        if (error.name !== "AbortError") setState({ data: null, loading: false, error });
      });

    return () => controller.abort();    // cancel when url changes or the component unmounts
  }, [url]);

  return state;
}

export function UserCard({ id }) {
  const { data, loading, error } = useFetch(`/api/users/${id}`);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Could not load the user ({error.message}).</p>;
  return <p>{data.name}</p>;
}

import { useReducer } from "react";

const initialCart = { items: [], couponApplied: false };

export function cartReducer(state, action) {
  switch (action.type) {
    case "added":
      return { ...state, items: [...state.items, action.item] };
    case "removed":
      return { ...state, items: state.items.filter((i) => i.id !== action.id) };
    case "couponApplied":
      return { ...state, couponApplied: true };
    case "cleared":
      return initialCart;
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

export default function Cart() {
  const [cart, dispatch] = useReducer(cartReducer, initialCart);
  const total = cart.items.reduce((sum, i) => sum + i.price, 0) * (cart.couponApplied ? 0.9 : 1);

  return (
    <>
      <button onClick={() => dispatch({ type: "added", item: { id: Date.now(), price: 500 } })}>Add item</button>
      <button onClick={() => dispatch({ type: "couponApplied" })}>Apply 10% coupon</button>
      <button onClick={() => dispatch({ type: "cleared" })}>Clear</button>
      <p>{cart.items.length} items, total ₹{total}</p>
    </>
  );
}

let state = cartReducer(initialCart, { type: "added", item: { id: 1, price: 500 } });
state = cartReducer(state, { type: "couponApplied" });
console.log(state.items.length, state.couponApplied);   // 1 true

import { useEffect, useState } from "react";

export function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);       // a new keystroke cancels the pending update
  }, [value, delay]);

  return debounced;
}

export function SearchPage({ search }) {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 400);
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!debouncedQuery) return;
    let ignore = false;
    search(debouncedQuery).then((found) => {
      if (!ignore) setResults(found);    // drop answers to older queries
    });
    return () => { ignore = true; };
  }, [debouncedQuery, search]);

  return (
    <>
      <input aria-label="Search" value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>{results.map((r) => <li key={r}>{r}</li>)}</ul>
    </>
  );
}

import { useRef, useState } from "react";

export function ControlledPin() {
  const [pin, setPin] = useState("");
  return (
    <input
      aria-label="PIN"
      value={pin}
      onChange={(e) => setPin(e.target.value.replace(/\D/g, "").slice(0, 6))}   // digits only, max 6
    />
  );
}

export function UncontrolledName({ onSave }) {
  const nameRef = useRef(null);
  function handleSubmit(event) {
    event.preventDefault();
    onSave(nameRef.current.value);        // read from the DOM only when needed
  }
  return (
    <form onSubmit={handleSubmit}>
      <input aria-label="Name" ref={nameRef} defaultValue="Asha" />
      <button type="submit">Save</button>
    </form>
  );
}

import { useState } from "react";

function validate({ email, password }) {
  const errors = {};
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errors.email = "Enter a valid email address.";
  if (password.length < 8) errors.password = "Use at least 8 characters.";
  else if (!/\d/.test(password)) errors.password = "Include at least one number.";
  return errors;
}

export default function SignUpForm({ onSignUp }) {
  const [values, setValues] = useState({ email: "", password: "" });
  const [touched, setTouched] = useState({});

  const errors = validate(values);                       // derived on every render
  const isValid = Object.keys(errors).length === 0;

  const handleChange = (e) => setValues({ ...values, [e.target.name]: e.target.value });
  const handleBlur = (e) => setTouched({ ...touched, [e.target.name]: true });

  function handleSubmit(event) {
    event.preventDefault();                              // no page reload
    if (isValid) onSignUp(values);
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <label>
        Email
        <input name="email" type="email" value={values.email} onChange={handleChange} onBlur={handleBlur} />
      </label>
      {touched.email && errors.email && <p role="alert">{errors.email}</p>}

      <label>
        Password
        <input name="password" type="password" value={values.password} onChange={handleChange} onBlur={handleBlur} />
      </label>
      {touched.password && errors.password && <p role="alert">{errors.password}</p>}

      <button type="submit" disabled={!isValid}>Sign up</button>
    </form>
  );
}

import { useActionState } from "react";

export function NewsletterForm({ subscribe }) {
  const [message, formAction, isPending] = useActionState(async (previous, formData) => {
    const email = formData.get("email");
    if (!email.includes("@")) return "Enter a valid email address.";
    await subscribe(email);
    return "Subscribed!";
  }, "");

  return (
    <form action={formAction}>
      <input name="email" aria-label="Email" />
      <button type="submit" disabled={isPending}>Subscribe</button>
      {message && <p>{message}</p>}
    </form>
  );
}

import { useState } from "react";

function TemperatureInput({ label, value, onChange }) {
  return (
    <label>
      {label}
      <input value={value} onChange={(e) => onChange(e.target.value)} />
    </label>
  );
}

const toF = (c) => (c === "" || isNaN(c) ? "" : String(Math.round((c * 9) / 5 + 32)));
const toC = (f) => (f === "" || isNaN(f) ? "" : String(Math.round(((f - 32) * 5) / 9)));

export default function Converter() {
  const [celsius, setCelsius] = useState("");          // the single source of truth
  return (
    <>
      <TemperatureInput label="Celsius" value={celsius} onChange={setCelsius} />
      <TemperatureInput label="Fahrenheit" value={toF(celsius)} onChange={(f) => setCelsius(toC(f))} />
    </>
  );
}

export function withLoading(Component) {
  function WithLoading({ isLoading, ...props }) {
    if (isLoading) return <p>Loading...</p>;
    return <Component {...props} />;          // pass every other prop through
  }
  WithLoading.displayName = `withLoading(${Component.displayName || Component.name})`;
  return WithLoading;
}

function UserList({ users }) {
  return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

export const UserListWithLoading = withLoading(UserList);
// <UserListWithLoading isLoading={loading} users={users} />

import { useEffect, useState } from "react";

export function useUsers(fetchUsers) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetchUsers().then((list) => {
      setUsers(list);
      setLoading(false);
    });
  }, [fetchUsers]);
  return { users, loading };
}

function Team({ fetchUsers }) {
  const { users, loading } = useUsers(fetchUsers);   // the data flow is visible right here
  if (loading) return <p>Loading...</p>;
  return <UserList users={users} />;
}

import { Component } from "react";

export class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };                  // render the fallback next
  }

  componentDidCatch(error, info) {
    logToService(error, info.componentStack);   // e.g. Sentry
  }

  render() {
    if (this.state.hasError) return this.props.fallback ?? <p>Something went wrong.</p>;
    return this.props.children;
  }
}

function logToService(error, stack) {
  // send to your monitoring service
}

function Price({ product }) {
  return <p>₹{product.price.toFixed(2)}</p>;    // throws if product is undefined
}

export default function Shop() {
  return (
    <ErrorBoundary fallback={<p>Could not show the price.</p>}>
      <Price product={undefined} />
    </ErrorBoundary>
  );
}

import { configureStore, createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] },
  reducers: {
    added(state, action) {
      state.items.push(action.payload);        // looks like mutation; Immer makes it immutable
    },
    removed(state, action) {
      state.items = state.items.filter((item) => item.id !== action.payload);
    },
  },
});

export const { added, removed } = cartSlice.actions;   // action creators, generated for you

export const store = configureStore({ reducer: { cart: cartSlice.reducer } });

console.log(added({ id: 3, name: "Kettle" }));
// { type: 'cart/added', payload: { id: 3, name: 'Kettle' } }

store.dispatch(added({ id: 1, name: "Kettle", price: 1299 }));
store.dispatch(added({ id: 2, name: "Mixer", price: 2499 }));
store.dispatch(removed(1));
console.log(store.getState().cart.items);
// [ { id: 2, name: 'Mixer', price: 2499 } ]

import { Provider, useDispatch, useSelector } from "react-redux";

function CartBadge() {
  const count = useSelector((state) => state.cart.items.length);   // re-renders only when this changes
  return <span>Cart ({count})</span>;
}

function AddButton({ product }) {
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(added(product))}>Add to cart</button>;
}

export function App() {
  return (
    <Provider store={store}>
      <CartBadge />
      <AddButton product={{ id: 9, name: "Bottle", price: 399 }} />
    </Provider>
  );
}

import { memo, useCallback, useState } from "react";

let listRenders = 0;

const CityList = memo(function CityList({ onSelect }) {
  listRenders += 1;
  return ["Pune", "Delhi"].map((city) => (
    <button key={city} onClick={() => onSelect(city)}>{city}</button>
  ));
});

export default function Page() {
  const [count, setCount] = useState(0);
  const [selected, setSelected] = useState(null);

  const handleSelect = useCallback((city) => setSelected(city), []);   // the same function every render

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Unrelated: {count}</button>
      <p>Selected: {selected ?? "none"}</p>
      <CityList onSelect={handleSelect} />          {/* try onSelect={(c) => setSelected(c)} */}
    </>
  );
}

import { lazy, Suspense, useState } from "react";

const Reports = lazy(() => import("./Reports"));   // a separate chunk, loaded on first render

export default function Dashboard() {
  const [showReports, setShowReports] = useState(false);
  return (
    <>
      <button onClick={() => setShowReports(true)}>Open reports</button>
      {showReports && (
        <Suspense fallback={<p>Loading reports...</p>}>
          <Reports />
        </Suspense>
      )}
    </>
  );
}

const Settings = lazy(() => import("./pages/Settings"));
const Billing = lazy(() => import("./pages/Billing"));

<Suspense fallback={<PageSpinner />}>
  <Routes>
    <Route path="/settings" element={<Settings />} />
    <Route path="/billing" element={<Billing />} />
  </Routes>
</Suspense>

import { BrowserRouter, Link, Route, Routes, useNavigate, useParams } from "react-router";

function UserPage() {
  const { id } = useParams();                 // "42" for /users/42: always a string
  const navigate = useNavigate();
  return (
    <>
      <h1>User {id}</h1>
      <button onClick={() => navigate("/users")}>Back to all users</button>
    </>
  );
}

function UserList() {
  return (
    <ul>
      <li><Link to="/users/42">Asha</Link></li>
      <li><Link to="/users/7">Ravi</Link></li>
    </ul>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users" element={<UserList />} />
        <Route path="/users/:id" element={<UserPage />} />
        <Route path="*" element={<p>Page not found</p>} />
      </Routes>
    </BrowserRouter>
  );
}

function LoginForm({ login }) {
  const navigate = useNavigate();
  async function handleSubmit(event) {
    event.preventDefault();
    await login(new FormData(event.currentTarget));
    navigate("/dashboard", { replace: true });   // replace: Back won't return to the login page
  }
  return <form onSubmit={handleSubmit}>{/* fields */}</form>;
}

// pages/products/[id].jsx: static generation, refreshed at most every hour (ISR)
export async function getStaticProps({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`).then((r) => r.json());
  return { props: { product }, revalidate: 3600 };
}

export async function getStaticPaths() {
  return { paths: [], fallback: "blocking" };   // build each page on its first request
}

export default function ProductPage({ product }) {
  return <h1>{product.name}</h1>;
}

// app/products/[id]/page.jsx
export const revalidate = 3600;                 // regenerate at most every hour

export default async function ProductPage({ params }) {
  const { id } = await params;
  const product = await fetch(`https://api.example.com/products/${id}`).then((r) => r.json());
  return <h1>{product.name}</h1>;
}

interface User {
  id: number;
  name: string;
}

function greet(user: User): string {
  return `Hello, ${user.name.toUpperCase()}`;
}

greet({ id: 1, name: "Asha" });    // fine
greet({ id: 2, nmae: "Ravi" });    // error TS2353: Object literal may only specify known properties,
                                   // and 'nmae' does not exist in type 'User'.

const response = JSON.parse('{"id": "7", "name": null}') as User;   // "trust me": no check happens
console.log(typeof response.id);    // string: the type said number, and nothing checked

function isUser(value: unknown): value is User {
  return (
    typeof value === "object" && value !== null &&
    typeof (value as User).id === "number" &&
    typeof (value as User).name === "string"
  );
}

const data: unknown = JSON.parse('{"id": 7, "name": "Priya"}');
if (isUser(data)) {
  console.log(data.name.toUpperCase());   // PRIYA: TypeScript knows it's a User here
}

// Both describe an object
interface ProductCardProps {
  name: string;
  price: number;
}

type ProductCardPropsAlias = {
  name: string;
  price: number;
};

// Extending
interface SaleCardProps extends ProductCardProps {
  discountPercent: number;
}
type SaleCardPropsAlias = ProductCardPropsAlias & { discountPercent: number };

// Only a type alias can name these
type Variant = "primary" | "secondary";     // a union
type Point = [x: number, y: number];        // a tuple
type Nullable<T> = T | null;                // a generic alias

// Only an interface merges
interface Window {
  analyticsId: string;                       // adds a field to the browser's global Window type
}

// Narrowing with typeof
function formatAmount(amount: number | string): string {
  if (typeof amount === "number") {
    return `₹${amount.toFixed(2)}`;      // here amount is a number
  }
  return `₹${amount}`;                   // here it's a string
}

// A discriminated union
type CardPayment = { kind: "card"; cardLast4: string };
type UpiPayment = { kind: "upi"; upiId: string };
type CashPayment = { kind: "cash" };
type Payment = CardPayment | UpiPayment | CashPayment;

function describe(payment: Payment): string {
  switch (payment.kind) {
    case "card":
      return `Card ending ${payment.cardLast4}`;   // only card fields are available here
    case "upi":
      return `UPI ${payment.upiId}`;
    case "cash":
      return "Cash on delivery";
  }
}

// An intersection: has everything from both
type Timestamped = { createdAt: Date };
type SavedPayment = Payment & Timestamped;

console.log(formatAmount(1299));                               // ₹1299.00
console.log(describe({ kind: "upi", upiId: "asha@okbank" }));  // UPI asha@okbank

// any: no checks at all
let loose: any = 5;
loose.toUpperCase();                 // compiles, then crashes at runtime

// unknown: you must check first
let safe: unknown = JSON.parse('"hello"');
// safe.toUpperCase();               // error TS18046: 'safe' is of type 'unknown'.
if (typeof safe === "string") {
  console.log(safe.toUpperCase());   // HELLO: narrowed to string
}

// never: a function that never returns normally
function fail(message: string): never {
  throw new Error(message);
}

// never: exhaustiveness checking
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.side ** 2;
    default: {
      const unhandled: never = shape;   // only compiles if every kind is handled above
      return fail(`Unknown shape: ${JSON.stringify(unhandled)}`);
    }
  }
}

console.log(area({ kind: "square", side: 3 }));   // 9

function first<T>(items: T[]): T | undefined {
  return items[0];
}

interface User {
  id: number;
  name: string;
}

const users: User[] = [{ id: 1, name: "Asha" }];

const n = first([10, 20, 30]);      // number | undefined
const u = first(users);             // User | undefined
console.log(n, u?.name);            // 10 Asha
console.log(first([]));             // undefined: why the return type includes undefined

// first(users)?.nmae;              // error TS2339: Property 'nmae' does not exist on type 'User'.

function firstAny(items: any[]): any {
  return items[0];
}
firstAny(users).nmae;               // compiles happily, and is undefined at runtime

function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;     // T must have a length
}

console.log(longest("chai", "coffee"));     // coffee
console.log(longest([1, 2], [1, 2, 3]));    // [ 1, 2, 3 ]
// longest(10, 20);                         // error: number has no 'length'

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  city: string;
}

type UserUpdate = Partial<Omit<User, "id">>;      // any fields except id, all optional
type UserListItem = Pick<User, "id" | "name">;    // just what a list row needs
type PublicUser = Omit<User, "password">;         // safe to send to the browser

function updateUser(id: number, changes: UserUpdate) {
  return { id, ...changes };
}

const row: UserListItem = { id: 1, name: "Asha" };
const profile: PublicUser = { id: 1, name: "Asha", email: "[email protected]", city: "Pune" };

console.log(updateUser(1, { city: "Bengaluru" }));   // { id: 1, city: 'Bengaluru' }
console.log(row.name, profile.city);                  // Asha Pune
// const leak: PublicUser = { ...profile, password: "secret" };   // error: 'password' isn't in PublicUser

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

type ButtonProps = {
  variant?: "primary" | "secondary";
  disabled?: boolean;
  onClick: MouseEventHandler<HTMLButtonElement>;
  children: ReactNode;
};

export function Button({ variant = "primary", disabled = false, onClick, children }: ButtonProps) {
  return (
    <button type="button" className={`btn btn-${variant}`} disabled={disabled} onClick={onClick}>
      {children}
    </button>
  );
}

export function Example() {
  return (
    <>
      <Button onClick={() => console.log("saved")}>Save</Button>
      <Button variant="secondary" disabled onClick={(e) => console.log(e.currentTarget.textContent)}>
        Cancel
      </Button>
      {/* <Button variant="danger" onClick={() => {}}>Delete</Button>   error: "danger" isn't allowed */}
    </>
  );
}

import type { ComponentProps } from "react";

type FlexibleButtonProps = ComponentProps<"button"> & {
  variant?: "primary" | "secondary";
};

export function FlexibleButton({ variant = "primary", className = "", ...rest }: FlexibleButtonProps) {
  return <button className={`btn btn-${variant} ${className}`} {...rest} />;
}

// <FlexibleButton type="submit" aria-label="Save" form="profile">Save</FlexibleButton>

import { useRef, useState } from "react";
import type { ChangeEvent, FormEvent } from "react";

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

type SearchBoxProps = {
  search: (query: string) => Promise<Product[]>;
};

export function SearchBox({ search }: SearchBoxProps) {
  const [query, setQuery] = useState("");                        // inferred as string
  const [results, setResults] = useState<Product[] | null>(null); // null: not searched yet
  const inputRef = useRef<HTMLInputElement>(null);               // React 19 types need the null

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    setQuery(event.target.value);                                // a string
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setResults(await search(query));
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} aria-label="Search" value={query} onChange={handleChange} />
      <button type="submit">Search</button>
      <button type="button" onClick={() => inputRef.current?.focus()}>Focus</button>

      {results === null ? (
        <p>Type and press Search.</p>
      ) : results.length === 0 ? (
        <p>No results.</p>
      ) : (
        <ul>{results.map((p) => <li key={p.id}>{p.name}</li>)}</ul>
      )}
    </form>
  );
}