What is State in React.JS?

State feature of React, continuous monitor for changes in an state object/variable.

If we define a state object, then any changes made to this object by user or JS/TS, will trigger the “React Function/Class Component” call, where the state variables are defined.

1. React Components (Functional or Class) are updated at in real time when the state is changed.
2. Like React Functional Components are not like your normal javascript functions, which needs to be called in order for them to execute. They are executed after every “State Change” in the webapp.
3. In other words state change define when the functional components are executed.
4. We can define “State Object” or “State Variables”. There will be inside either React Functional Component (React.FC) or React Class Component.

This means that we have choose carefully where we define state variables, it is recommended to include them in parent components rather than child, because we generally use child components for processing the values and then the final output is stored in state variables, so it makes logical to store the final value in parent component, hence for these scenarios state variables must be defined in parent component.

Reset State

State will be reset when you refresh your browser URL.

Sample Codes

Using the State Hook - React

• State in React Functional Component (useState)
• State in React Class Component (this.state)