When will you use this?

You use this in every component you write from your first app to your tenth year on the job.

• Product pages, login forms, and todo lists all use components, props, and state.
• When a user types in a search box, React state holds the text and filters a list.

Real-world: Freshdesk ticket inbox split

Freshdesk inbox container loads tickets from API; TicketRow only displays one ticket. Support agents get faster renders when filter changes because rows stay dumb.

Production-style code

function TicketInbox() {
  const [tickets, setTickets] = useState([]);
  const [filter, setFilter] = useState('open');

  useEffect(() => {
    fetch(`/api/tickets?status=${filter}`).then(r => r.json()).then(setTickets);
  }, [filter]);

  return (
    <>
      <FilterBar value={filter} onChange={setFilter} />
      {tickets.map(t => <TicketRow key={t.id} ticket={t} />)}
    </>
  );
}

function TicketRow({ ticket }) {
  return (
    <article>
      <h4>#{ticket.id} {ticket.subject}</h4>
      <p>{ticket.customerEmail}</p>
    </article>
  );
}

What happens in production: Container/presentational split lets designers redesign TicketRow without touching API polling logic.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// UserList.jsx — fetches and passes data
function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => { fetch('/api/users').then(r => r.json()).then(setUsers); }, []);
  return users.map(u => <UserRow key={u.id} user={u} />);
}

// UserRow.jsx — only displays
function UserRow({ user }) {
  return <tr><td>{user.name}</td><td>{user.email}</td></tr>;
}

Line-by-line walkthrough

How it works (big picture)

• UserList owns data loading.
• UserRow only renders one row.
• If the table design changes, you edit UserRow without touching fetch logic.

Do this on your computer

1. Identify a large component and extract a child that only receives props.
2. Move fetch or state to the parent.
3. Name files after the component.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Change the initial state value and see the starting UI change.
• Add one more item to the array in the example and confirm it appears in the list.

Remember

Split data components and display components. One component, one main responsibility. Compose small pieces into pages.

Common questions