Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
7.7: Designing Component Hierarchy

Introduction

One of the most difficult, confusing aspects of building a React app is deciding what components are responsible for what, and where the data gets stored. We'll look at some of the principles of React app design through examples.
Note that some React best practices are what is left out, i.e., state is not created unnecessarily, data is only controlled top-down, components functionally calculate values and states where possible, etc.

E-Commerce App Example

  1. 1.
    Our example is a full-stack e-commerce app. The app begins empty.
  2. 2.
    When the user clicks a button, the app requests a list of all available items from the server.
  3. 3.
    When the user clicks on any item in the list a detail view appears.
  4. 4.
    When the user clicks the Add to Cart button, the cart is displayed with all the items. In the cart the total for all items is calculated.

"App-Level" (or "Parent-Level") Data vs "Component-Level" Data

App-Level Data

Because the data about what items are in the list is needed throughout the app, we put the items array at the "app level", in the App component. This is the same for all the other data we need throughout the app, such as which item is currently selected, and the array of items in the cart.
1
const [items, setItems] = useState([]);
2
const [cart, setCart] = useState([]);
3
const [selectedItemIndex, setSelectedItem] = useState();
Copied!

Component-Level Data

There are a few pieces of data that are not needed at the app level, such as the GST calculated on all the items in the cart and the quantity selected in the detail view.
1
const subTotal = items.reduce(
2
(acc, item) => Number(acc) + Number(item.price),
3
0
4
);
5
​
6
const gst = subTotal * 0.07;
7
​
8
const total = subTotal + gst;
Copied!

Data Flows

Modifying Data in Parent Components via Prop Functions

Similar to Module 7.6: Passing Data Between Sibling Components, when a child component needs to manipulate data at the app level we pass a "prop function" down into the child component, which sends the parent necessary data via the prop function when the user performs an action.
For example, when the user clicks to add an item to cart, we send that item's index to App via a prop function to add that item to the cart array stored in app state. We format the data (to add quantity) in the prop function before modifying cart.

Examples

The following examples demonstrate the same concepts as in Module 7.6: Passing Data Between Sibling Components.
  1. 3.
    The setting of the cart array sets off the rendering of the Cart component and items in the cart.
Last modified 2mo ago