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: destructuring API responses

Swiggy order tracking API returns nested JSON. Modern JS destructuring keeps component code readable when pulling status, rider name, and ETA.

Production-style code

async function fetchOrder(orderId) {
  const res = await fetch(`/api/orders/${orderId}`);
  const { id, status, rider: { name: riderName }, etaMinutes } = await res.json();
  return { id, status, riderName, etaMinutes };
}

function OrderTracker({ orderId }) {
  const [order, setOrder] = useState(null);
  useEffect(() => {
    fetchOrder(orderId).then(setOrder);
  }, [orderId]);
  if (!order) return <p>Locating your order…</p>;
  return (
    <p>{order.status} — {order.riderName} arrives in {order.etaMinutes} min</p>
  );
}

What happens in production: Arrow functions, const, destructuring, and async/await appear in every React file — this is daily syntax, not academic trivia.

Lesson example (start here)

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

const user = { name: 'Asha', role: 'admin' };
const { name, role } = user;

const greet = (n) => `Hello, ${n}`;

const more = { ...user, role: 'editor' };

Line-by-line walkthrough

How it works (big picture)

• Destructuring pulls fields from objects.
• Arrow functions define components and handlers.
• Spread copies objects when updating state immutably.

Do this on your computer

1. Practice destructuring props: function Card({ title, price }) { ... }
2. Use import/export between files.
3. Replace .then() chains with async/await in fetch examples.
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.

Remember

Know: const, arrow functions, destructuring, spread, import/export, async/await. React components are just JavaScript functions.

Common questions