On state

Everything in React rolls around the concept of state.

The concept

State was unknown in proactive programming. Now it is surfacing as the central element of reactive programming.

In Dan Lew’s seminal article about Functional Reactive Programming the concept of state is fully explained and put further in context. Please read it first. It’s pure joy.

Proactive programming — No state

In proactive programming a component directly calls public methods of other components — and the passive components are not aware of these calls. They don’t do accounting for what is happening inside them — they have no state.

The caller component is responsible to interpret the results of the call. The passive component has one single responsibility: to make the publicly callable methods available to the external world.

Reactive programming — With state

In reactive programming everything is different. Each component owns its own state and modifies it on request. No component can directly modify the state of another component.

The caller component has to ask the receiver component to perform an operation which might modify the receiver component’s internal state, then wait for — subscribe to — the results.

This kind of isolation brings greater composability — essential to build large scale systems and complex, interactive user interfaces.

How it works

|============|==================|=================|==============|
| Paradigm   | Step 1           | Step 2          | Step 3       |
|============|==================|=================|==============|
| Reactive   | The switcher     | The bulb        | The bulb     |
|            | emits request    | receives        | changes its  |
|            | for state change | the request     | own state    |
|------------|------------------|-----------------|--------------|
| Imperative | The bulb         | The switcher    |              |
|            | exposes a state  | calls the state |              |
|            | change function  | change function |              |
|            |                  | of the bulb     |              |
|================================================================|

State in React

State is so important in React it is marked first in the list of features:

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. — https://reactjs.org/

More, when hooks were introduced they were immediately related to state:

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. — Introducing Hooks

React has to offer built-in mechanisms to deal with state — to support one of its main core features. And yes it does with useState and useReducer.

None of these are powerful enough to handle complex scenarios like global shared state — leaving to the ecosystem to come up with alternatives like:

• Redux, MobX — Global, shared state services for large applications.
• Apollo GraphQL — State management bundled with data management from a proven provider.
• XState — Finite state machines and state charts to manage state and make it error prone.

Every day a new state library or approach is popping up. There is no holy grail which one to use — everybody makes its own bet.

When in doubt important is to follow the React way: ‘Don’t overthink it`. Which in this case translates to: ‘Use only when you need it’.

Learn the different techniques and combine them by need.

|================|=============================|===========================================
| Implementation | When to use                 | State type | Notes                       |
|================|=============================|===========================================
| useState       | Simple states               | Local      |                             |
|----------------|-----------------------------|------------|-----------------------------|
| useReducer     | Complex state logic         | Local      | With `useContext` ~= Redux  |
|----------------|-----------------------------|------------|-----------------------------|
| useMachine     | Complex state logic         | Local      | - Use for component design  |
| (XState)       | Fool-proof states           |            | - Autogenerate tests        |
|----------------|-----------------------------|------------|-----------------------------|
| Redux, MobX    | When none above are enough  | Global     |                             |
|================|=============================|============|=============================|

Resources

• An Introduction to Functional Reactive Programming
• React State with Hooks: useReducer, useState, useContext
• Application State Management with React
• React’s useReducer vs Redux
• Finite State Machines with React
• Gatsby: Move page component state & side effect handling to xstate
• Model-Based Testing in React with State Machines
• Learn how to work with your local data in Apollo Client

To React with best practices. Written by @metamn.