Holds state and handler
Frontend / Knowledge library
React
component UI library, one-way data flow
Why learn React?
Largest frontend ecosystem and job market. Even if you use something else, its component model is the industry's shared mental model.
Where it came from
Born from Facebook's news-feed complexity. The virtual DOM and 'UI as a function of state' idea reshaped frontend thinking; hooks (2019) reshaped it again.
Build your understanding
Work through these exercises in order. Try the task before opening a reference.
- Build a counter with useState; explain re-renders.
- Lift state up between two components.
- Fetch & display data with useEffect correctly (deps array!).
- Build a custom hook (useLocalStorage).
- Explain reconciliation and when to use memo/useMemo.
Documentation and sources
- Official documentation / standards body (react.dev)
Connect the ideas
Built on
Enables
Alternatives
Explore next
TypeScriptNode.jsAstroNext.jsReact NativeReduxReScriptStorybookSvelteTailwind CSSTanStack QueryTanStack RouterTesting LibraryVercel (vercel)XStateZustand
Real World Example
Synchronized Inventory Dashboard
Retailers managing multi-location stock levels
The business problem
Inconsistent stock displays across different UI widgets lead to customer confusion and overselling.
How this topic solves it
Utilize React's state lifting pattern to maintain a single source of truth for inventory counts, ensuring all UI components reflect the same data via one-way data flow.
- Identify the common parent component that encompasses all inventory display widgets.
- Move the inventory count state variable from individual child components to the parent.
- Define an event handler function in the parent to update the state.
- Pass the current count and the handler function down to child components as props.
- Update child components to read the count from props and trigger the handler on interaction.
Shows how state moves from children to a parent and flows back down as props.
Displays count, calls handler
Displays count, calls handler
- Child Widget 1 → triggers handler → Parent Component
- Parent Component → passes props → Child Widget 1
- Parent Component → passes props → Child Widget 2
Implementation example
This demonstrates lifting state to the parent and passing it down as props to ensure consistent data across widgets.
function InventoryManager() {
const [stock, setStock] = useState(10); // Centralized state
return <Widget count={stock} onUpdate={() => setStock(stock - 1)} />;
}
function Widget({ count, onUpdate }) {
return <button onClick={onUpdate}>{count}</button>; // Consumes props
}Expected business outcome
A unified interface where every stock widget updates simultaneously, providing a consistent user experience.
Limitations and checks
Prop drilling can occur if state must be passed through many layers of intermediate components, which can be checked by monitoring component depth and complexity.