Designing State In React

prerequisites

basic JS syntax

React components, including props and state
JSX

tldr;

state respresents the "memory" of an application
in React, state is maintained by individual components
it's important to design your React application so that state always has a single source of truth

What's in a state?

State is not a concept unique to React. Any time an application can change based on how a user interacts with it, it must have some concept of memory. The application functioned in one way, and then after an interaction it functioned in a different way. It changed to a different state.

colorState = "blue";

Set Color

Sometimes it's easy to confuse application state with other types of data in an application. As applications grow, so does the data flowing throw them. New variables are created, and new functions return new data derived from existing data. But when designing a stateful application, its important to visualize exactly what data represents the state of that application, and where it will live.

What will make up the "memory" of your application?

In React, there is a clear distinction between state and other data moving through an application. Every component can utilize just two kinds of data. It can have data passed to it, via props or context, or it can maintain its own data in the form of state. It's own "memory" of data existing within that component that can change.

Finding state a home - WIP

hoisting state
app state vs local (ie visual components)

State takes shape - WIP

normalizing v not
single source of truth