Step 5 — React 19 essentials

React lets you build the UI as components. Define a button once and reuse it 100 times — fix it in one place, all 100 update.

React 19's new Compiler auto-memoizes for you. You almost never need useMemo or useCallback.

Your first component

import { useState } from "react";

export function Counter() {
  const [n, setN] = useState(0);
  return (
    <button onClick={() => setN(n + 1)}>
      Clicked: {n}
    </button>
  );
}

Three things to notice:

• a function (capitalized) is a component
• useState(0) defines a piece of state inside the component
• calling setN(...) re-renders automatically

Props — what parents hand to children

function Greeting({ name }: { name: string }) {
  return <h1>Hi, {name}!</h1>;
}
<Greeting name="codingstairs" />

Same props → same UI. Components should be pure functions of props + state.

What changed in React 19

• Compiler: auto-optimizations at build time
• use hook: consume Promises directly
• Actions: cleaner form submission, especially with Server Components

Try it

pnpm create next-app@latest my-first-react, replace app/page.tsx with the Counter, then pnpm dev and visit http://localhost:3000.

Next

Step 6 wires components into routes with Next.js.