React - Local component state (known as State)

About

This page is about the local state of a component.

In React, this local state is known as state

Usage

  • A change of value triggers a rendering
  • State is useful for handling data that is local to the component such as the data that comes from user interaction.

State value persistence

  • The state value is discarded:
    • if a parent component does not render the child component in the same position. The state value is indexed by the hierarchical position of the component in the tree.
    • if the component is unmounted (not shown anymore)
    • if the page is reloaded.

If you need to persist local state, you should:

In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. You can use stateless components inside stateful components, and vice versa.

How to persist the local state between rendering?

See the dedicated page: React - How to persist the local state between rendering without any library? (custom useState Hook)

State by component type

Check the dedicated page:





Discover More
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 - State

This page is UI State in React. 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 The global...



Share this page:
Follow us:
Task Runner