Build it

Build the static stock screen in React 19 and TypeScript with typed props, then add one piece of state and watch exactly which components render on each keystroke.

1. Create a React + TypeScript project

   Vite needs Node.js 20.19+ or 22.12+. Follow any prompts the first command shows, then start the dev server and open http://localhost:5173. Delete the demo content in src/App.tsx.

   TerminalCopy

   npm create vite@latest stock-screen -- --template react-ts
   cd stock-screen
   npm install
   npm run dev

   Open src/main.tsx: the template already wraps <App /> in <StrictMode> inside createRoot(...).render(...). That is the first trigger of every React app. The same components work unchanged in a Next.js app, which Loading server data uses.

2. Type the data and add sample rows

   src/types.tssrc/data.ts

   TypeScriptCopy

   // src/types.ts: what the stock API returns for one article (money in integer cents)
   export type StockItem = {
     articleId: string;
     name: string;
     category: string;
     onHand: number;
     reorderLevel: number;
     priceCents: number;
     updatedAt: string; // ISO date-time, e.g. '2026-10-20T06:10:00Z'
   };
   
   export type OrderCounts = { now: number; later: number };
   
   export const isLow = (item: StockItem) => item.onHand <= item.reorderLevel;
   export const formatCents = (cents: number) => `$${(cents / 100).toFixed(2)}`;

3. Write the table and its rows

   Each component declares its props type. The console.log lines are temporary, so you can see renders in step 6.

   src/StockRow.tsxsrc/StockTable.tsx

   TypeScriptCopy

   // src/StockRow.tsx: one row, nothing but props in, elements out
   import { formatCents, isLow, type StockItem } from './types';
   
   type StockRowProps = { item: StockItem };
   
   export function StockRow({ item }: StockRowProps) {
     console.log('render StockRow', item.articleId);
     const low = isLow(item);
     return (
       <tr className={low ? 'low' : undefined}>
         <td>{item.name}</td>
         <td>{item.onHand}</td>
         <td>{item.reorderLevel}</td>
         <td>{formatCents(item.priceCents)}</td>
         <td>{low ? 'Low' : 'OK'}</td>
       </tr>
     );
   }

4. Add the other parts, using children for the card

   Panel types its children as ReactNode, which accepts anything React can show: elements, text, numbers, or nothing.

   src/Panel.tsxsrc/SearchBar.tsxsrc/AdjustPanel.tsxsrc/OrderSummary.tsx

   TypeScriptCopy

   // src/Panel.tsx: a card that wraps whatever you put between its tags
   import type { ReactNode } from 'react';
   
   type PanelProps = { title: string; children: ReactNode };
   
   export function Panel({ title, children }: PanelProps) {
     return (
       <section className="panel">
         <h2>{title}</h2>
         {children}
       </section>
     );
   }

5. Assemble the screen

   src/StockScreen.tsxsrc/App.tsx

   TypeScriptCopy

   // src/StockScreen.tsx: composes the parts and passes each one its props
   import { AdjustPanel } from './AdjustPanel';
   import { OrderSummary } from './OrderSummary';
   import { SearchBar } from './SearchBar';
   import { StockTable } from './StockTable';
   import type { OrderCounts, StockItem } from './types';
   
   const counts: OrderCounts = { now: 18, later: 41 }; // module level: the same object every render
   
   type StockScreenProps = { items: StockItem[] };
   
   export function StockScreen({ items }: StockScreenProps) {
     console.log('render StockScreen');
     const query = '';                  // static for now
     return (
       <main className="stock-screen">
         <h1>Morning stock check</h1>
         <SearchBar query={query} onQueryChange={() => {}} />
         <StockTable items={items} />
         <AdjustPanel item={null} />
         <OrderSummary counts={counts} />
       </main>
     );
   }

   The page shows four rows in name order, with oil, milk and sugar marked Low (milk is exactly at its reorder level). Now type in the search box. Nothing appears, and the console shows no new logs. Nobody changed any state, so nothing triggered a render, and React keeps the input showing its value, which is still an empty string.

6. Add one piece of state and watch the renders

   useState gets a full lesson next (State, effects and where data should live). Here it is only the trigger.

   DiffCopy

   +import { useState } from 'react';
    import { AdjustPanel } from './AdjustPanel';
   @@
    export function StockScreen({ items }: StockScreenProps) {
   +  const [query, setQuery] = useState('');
      console.log('render StockScreen');
   -  const query = '';                  // static for now
   +  const q = query.trim().toLowerCase();
   +  const visible = items.filter((item) => item.name.toLowerCase().includes(q));
      return (
        <main className="stock-screen">
          <h1>Morning stock check</h1>
   -      <SearchBar query={query} onQueryChange={() => {}} />
   -      <StockTable items={items} />
   +      <SearchBar query={query} onQueryChange={setQuery} />
   +      <StockTable items={visible} />

   Open the browser console, clear it, and type o. Only "Cooking oil 2 L" and "Flour 2 kg" contain an "o". In development you will usually see each line twice, because StrictMode calls each component twice; one copy per render is shown here:

   OutputCopy

   render StockScreen
   render SearchBar
   render StockTable
   render StockRow A2040
   render StockRow A1180
   render AdjustPanel
   render OrderSummary

   Read it against the rules. StockScreen owns the state, so it renders. Every child renders because its parent did, including AdjustPanel and OrderSummary, whose props did not change. The milk and sugar rows do not log: their keys are gone, so React removes their DOM rows in the commit. The oil and flour rows run, but their output is identical, so the commit leaves their cells alone.

7. Let OrderSummary skip renders with memo

   DiffCopy

   +import { memo } from 'react';
    import { Panel } from './Panel';
   @@
   -export function OrderSummary({ counts }: OrderSummaryProps) {
   +export const OrderSummary = memo(function OrderSummary({ counts }: OrderSummaryProps) {
      console.log('render OrderSummary');
   @@
      );
   -}
   +});

   Type another letter: render OrderSummary no longer appears, because counts is the same module-level object every time. Now move counts inside StockScreen as an inline object and type again: the log comes back, because each render creates a new object. Put it back afterwards. Finally, run npm run build, which type-checks the code with tsc before bundling: remove the item prop from one <StockRow /> and the build fails with a missing-property error. Remove the console.log lines when you are done.