Thinking in React

7 min readOct 28, 2023

What you will build …

React.js is an open-source JavaScript-based user interface library. It is hugely popular for web 🖥 and mobile app📱 development.

When you build a user interface with React, you will first break it apart into pieces called components.
Then, you will describe the different visual states for each of your components.
Finally, you will connect your components together so that the data flows through them.

Start with the mockup

Step 1: Break the UI into a component hierarchy

Start by drawing boxes around every component and subcomponent in the mockup and naming them.Depending on your background, you can think about splitting up a design into components in different ways:

Programming — use the same techniques for deciding if you should create a new function or object.
CSS — consider what you would make class selectors for. (However, components are a bit less granular.)
Design — consider how you would organize the design’s layers.

Now that you’ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:

Step 2: Build a static version in React

The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity.

It’s often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking.

Step 3: Find the minimal but complete representation of the UI state

To make the UI interactive, you need to let users change your underlying data model.

You will use state for this.

The most important principle for structuring state is to keep it DRY (Don’t Repeat Yourself).

Now think of all of the pieces of data in this example application:

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

Which of these are state? Identify the ones that are not:

Does it remain unchanged over time? If so, it isn’t state.
Is it passed in from a parent via props? If so, it isn’t state.
Can you compute it based on existing state or props in your component? If so, it definitely isn’t state!

Let’s go through them one by one again:

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

This means only the search text and the value of the checkbox are state! Nicely done!

Props vs State

There are two types of “model” data in React: props and state. The two are very different:

Props are like arguments you pass to a function. They let a parent component pass data to a child component and customize its appearance. For example, a Form can pass a color prop to a Button.
State is like a component’s memory. It lets a component keep track of some information and change it in response to interactions. For example, a Button might keep track of isHovered state.

Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and pass it down to child components as their props.

Step 4: Identify where your state should live

After identifying your app’s minimal state data, you need to identify which component is responsible for changing this state or owns the state.

Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component.

Now let’s run through our strategy for them:

Identify components that use state:

ProductTable needs to filter the product list based on that state (search text and checkbox value).
SearchBar needs to display that state (search text and checkbox value).

2. Find their common parent: The first parent component both components share is FilterableProductTable.

3. Decide where the state lives: We’ll keep the filter text and checked state values in FilterableProductTable.

So the state values will live in FilterableProductTable.

Step 5: Add inverse data flow

Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in FilterableProductTable.

Inside the SearchBar, you will add the onChange event handlers and set the parent state from them:

NOTE: React Data Flow

What is data binding?

Data binding is the process that establishes a connection between the app UI and the data it displays.

In React, data flows one way: from owner to child. We think that this makes your app’s code easier to understand. You can think of it as “one-way data binding.”

React follows a one-way data flow, which makes it easier to understand and debug your application. In React, data is passed from parent components to child components through “props”.

Two-way binding gives components in your application a way to share data.

In one-way data binding information flows in only one direction, and is when the information is displayed, but not updated.
In two-way data binding information flows in both directions, and is used in situations where the information needs to be updated.

In one-way data binding one of the following conditions can be followed:

Component to View: Any change in component data will be reflected in the view.
View to Component: Any change in View would get reflected in the component’s data. — for this, we have to add event handlers to the view element. However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you’ll often want to update some React state when you receive user input. In React, you would implement this by listening to a “change” event, reading from your data source (usually the DOM), and calling setState() on one of your components.

The best practices for using React two-way binding applications can be summarised in 4 steps:

1) Prefer data to flow from parent to child components rather than from child to parent components.

2) Avoid calling setState() in the parent component as this triggers re-rendering of the entire component tree and is not recommended for performance reasons.

3) Use pure functions where possible and avoid using setState() or other lifecycle methods which could cause unnecessary re-renders.

4) Make sure that when you use a two-way data binding, your state is always passed down to the child components as props and never through any other means such as callbacks or event handlers.

Lifting state up

We lift the state up to make the parent state a single shared state and a sole “source of truth” and pass the parent’s data to its children.

Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props.

TIPS

React Developer Tools

Use React Developer Tools to inspect React components, edit props and state, and identify performance problems.

Using TypeScript

TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript supports JSX and you can get full React Web support by adding @types/react and @types/react-dom to your project.

Every file containing JSX must use the .tsx file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX.

Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component’s props.