React - State


This page is about UI State in React.



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


The global state is known as context.

You can also implement your own with a High Order Component



props are:

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


React does not persist:

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 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.



Discover More

is a virtual dom technology that permits to create HTML page or components based on the concepts that: If the data (state) changes, the UI should change too. Learn once, write anywhere Babel for...
React Render Element Splittsing
React - (Component) Updating

updating is a lifecycle render step that updates a component. An update is triggered by a change of state. See See React DOM compares the new element and its children to the previous one,...
React - Auth

Authentication is just a state that indicates if a user is logged in or not. When react makes a request to a web server, the web server will authenticate the request. Via pure hook function - ...
React - Building Process

The different steps to build something in React. Design a Component Hierarchy Draw boxes around every component (and subcomponent) in the mock and give them all names. The designer have for sure...
React - Children Element

When you create an element, you pass one or more children elements that will build the React DOM tree. componentyou create a component Related: See also The below example codes are created with JSX....
React - Component (User-defined Element)

A component is a user-defined react element in the React tree. Components let you split the UI into independent, reusable pieces, and think each piece in isolation. Conceptually, components are like...
React - Controlled Component

A controlled component is a component such as a form element where its state is controlled by React. uncontrolled component In a controlled component, state is handled by the React component The nature...
React - How to persist the local state between rendering without any library? (custom useState Hook)

This article shows you how to persist your local state (ie React state) between re-render without the use of any state library We will use the classic React counter. If you refresh the page or unmount...
React Props Chrome Plugin
React - Props

props is the only object argument passed from a component to another component. Props are similar to State, but is public and not fully controlled by the component. You can also pass arguments to...
React Render Element Splittsing
React - ReactDOM.render

ReactDOM.render is the main function that renders an element into a DOM element. It will be: the root element in a single page application or another react element called a secondary root, when...

Share this page:
Follow us:
Task Runner