React - State

About

This page is about UI State in React.

React

Local

The Local state to a component in react is known as:

• state. A change of state triggers a render
• ref. A change of ref value does not triggers a render

Global

The global state is known as context.

You can also implement your own with a High Order Component

Shared

• Class Component: React Class Component - Shared State (Lifting state up)

Props

props are:

• component arguments / parameters / signature
• passed in the form of object properties from parent to child component.
• not really states but hold values.

Library

React does not persist:

• the global data between page load
• the local data (ie React state) between component rendering

It's let to a state management library.

State management library aims to implement logging, hot reloading, time travel, universal apps, record and replay.

A state management library will trace every mutation to the action that caused it. You can record user sessions and reproduce them just by replaying every action.

Redux

Redux evolves the ideas of Flux, but avoids its complexity by taking cues from Elm.

• The whole state of the app is stored in an object tree inside a single store.
• The only way to change the state tree is to emit an action, an object describing what happened.
• To specify how the actions transform the state tree, you write pure reducers.

Others

• Zustand used by Plate
• MobX (used by postman)
• Flux

¹⁾