MENU

Thinking In React

React is one of the premier ways to build big, fast web apps with JavaScript. It has scaled very well on Facebook and Instagram. Experienced React developers typically follow a fixed process when building an application with React.

Step 1: Break The UI Into A Component Hierarchy

Try splitting the mockup design into a hierarchy of components. Define your components top-down.

Step 2: Build A Static Version (no state)

Build a version that takes your data model and renders the UI but has no interactivity. Use props to pass data down, and don't use state at all. React's one-way data flow (also called one-way binding) keeps everything modular and fast.

Step 3: Identify The Minimal But Complete Representation Of UI State

Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand.

Step 4: Identify Where Your State Should Live

Identify every component that renders something based on that state. Find a common owner component (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 solely for holding the state and add it somewhere in the hierarchy above the common owner component. In modern React, this state is usually held with the useState or useReducer Hook.

Step 5: Add Inverse Data Flow

So far, we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state higher up. React makes this data flow explicit to help you understand how your program works, but it does require a little more typing than traditional two-way data binding. This is typically done by passing a callback function (often a state setter from useState) down as a prop, which child components call to report events back up.