Course: Section

Get Started with Modern React: Step by Step

Episode: Title

S02・V26: Thinking in React (Part 4)

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  1. We will identify the minimal, but complete, representation of UI state.
  2. We will identify which component should own the state.
Watch Video
Duration: 4m 59s

Step 3: Identify The Minimal (but Complete) Representation Of UI State

To make your UI interactive, you need to be able to trigger changes to your underlying data model. React makes this easy with “state“. To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is to be “DRY”, that is “Don’t Repeat Yourself”. Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand.

For example, if you’re building a “Todo” list, just keep an array of the Todo items around. Don’t keep a separate state variable for the count. Instead, when you want to render the Todo count, simply take the length of the Todo items array.

Think of all of the pieces of data in our example application. We have:

  • original list of products
  • search text the user has entered
  • value of the checkbox
  • filtered list of products

Let’s go through each one and figure out which one is state. Simply ask three questions about each piece of data:

  1. Is it passed in from a parent via props? If so, it probably isn’t state.
  2. Does it remain unchanged over time? If so, it probably isn’t state.
  3. Can you compute it based on any other state or props in your component? If so, it isn’t state.

Identifying State for our Application

Now, let’s run through these questions for each piece of data within our application:

  • The original list of products is passed in as props, so that’s not state.
  • The search text seems to be state since it changes over time and can’t be computed from anything.
  • The checkbox seems to be state as well, since it also changes over time and can’t be computed from anything either.
  • The filtered list of products isn’t state, because it can be computed by combining the original list of products with the search text and the value of the checkbox.

So finally, our state is:

  1. The search text the user has entered.
  2. The value of the checkbox.

We’ve now identified what the minimal set of app state is.

Step 4: Identify Where Your State Should Live

Next, we need to identify which component mutates, or “owns”, this state. Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state.

This is often the most challenging part for newcomers to understand, so follow these steps to figure it out…

For each piece of state in your application:

  • Identify every component that renders something based on that state.
  • And, find a common owner component, that is, a single component above all the components that need the state in the hierarchy.

Either the common owner or another component higher up in the hierarchy should own the state.

If you can’t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.

Let’s run through this strategy for our application:

ProductTable needs to filter the product list based on state, and SearchBar needs to display the search text and checked state. The common owner component is FilterableProductTable. It conceptually makes sense for the filter text and checked value to live in FilterableProductTable.

Summary

We identified the minimal, but complete, representation of UI state, and we identified which component should own the state.

Next Up…

In the next video, we will continue with Part 5 of “Thinking in React”.