Data Flow in React in React

Data Flow in React explains how information moves through a React app: down from parent to child through props, and inside a component through state.

What each lesson covers:

• Props: What props are, passing one or many props, destructuring, typing props with an interface, optional and default props, and passing objects, functions and children as props.
• State: Local state with useState: state versus props, reading and updating state, state-driven rendering, updating from the previous value, immutable updates of objects and arrays, and when to use state.

These two ideas are the base for every later chapter. Once you can tell what should be a prop and what should be state, forms, hooks and shared state all follow the same rules.

Every page runs real React in your browser. Edit the code and see the result next to it. Each lesson ends with exercises that check what your app shows, not how your code is written.

Lessons in this section

1. Props

   What props are, passing one or many props, destructuring, typing props with an interface, optional and default props, and passing objects, functions and children as props.

2. State

   Local component state with useState: state vs props, reading and updating state, state-driven rendering, updating from the previous value, common state values, immutable updates of objects and arrays, and when to use state.