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:

• persist your local state locally
• or use a state library

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:

• Function Component: What is the useState Hook and how to use it? Local State in a React Function Component
• Class Component: React Class Component - Local State