Managing UI Data in a Real React App: A Practical Walkthrough
Theory is easy; real apps are messy. Here is a practical walkthrough of managing UI data with props, state, and callbacks in a real example.
Managing UI Data in a Real React App: A Practical Walkthrough
Understanding props and state in isolation is easy. Using them together in a real app is where beginners get lost. Here is a practical walkthrough.
The Example
Imagine a simple food delivery UI: a restaurant list, a search box, and a cart. Each piece of data lives in a specific place for a reason.
Where the Search Query Lives
The search query is user input that filters the restaurant list. It lives as state in the component that owns the list, so the list can re-render as the user types.
Where the Restaurant Data Lives
Restaurant data usually comes from an API. It is fetched into state on mount, stored in the list component, and passed down to individual restaurant cards as props.
Where the Cart Lives
The cart needs to be read by a cart summary component and updated by restaurant cards. It is lifted to the common parent of both, the main app component, and passed down with callbacks to update it.
Child to Parent Updates
When a user clicks add to cart on a card, the card calls a callback prop passed from the parent. The parent updates the cart state, and the new cart flows down to the summary.
Filtering and Derived Data
The filtered restaurant list is derived from the full list and the search query. Do not store it in state; compute it during render so it always stays in sync.
Why This Matters
Real apps force you to decide where each piece of data lives. Get this right and the app stays simple as it grows. Get it wrong and you end up with duplicated state, stale UI, and bugs you cannot trace.
The Takeaway
In a real React app, data lives in the component that owns it, flows down as props, and changes come back up through callbacks. Derived values are computed, not stored. Master this pattern and you can build most UIs.
In the component that owns it. Data needed by multiple components is lifted to their common parent. Data that changes over time lives in state; data passed from a parent is props. Derived values are computed during render, not stored.
Pass a callback function from the parent to the child as a prop. The child calls it with the new data, the parent updates its state, and the new data flows back down as props to whoever needs it.
No. The filtered list is derived from the full list and the search query. Compute it during render so it always stays in sync. Storing it in state creates duplication and the risk of the two going out of sync.
Data flows down from parent to child through props, and changes flow up from child to parent through callbacks. The parent owns the shared state and updates it, then the new data flows back down.
Because it gives shared data a single source of truth. When multiple components need the same data, lifting it to their common parent keeps them in sync and avoids the bugs that come from duplicating state across components.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.