What is State in React ?

Simple definition and Real life example.

State is a plain and simple Javascript object used by React as a special React built-in object which helps us to create and handle(manage) data as in key/value pair. It's where we as a developer store the property values of the component.

In much simpler terms, state is a Javascript object that represents it's current(default) status/situation. Let's take a real life example of light bulb switch. It has two states, namely ON and OFF state. It's default state is OFF and whenever we want to illuminate the bulb we change it to ON state. Thus, is the way of keeping track of our state and changing it when needed is the case for use of State in React Js. Down, below I have used useState hook to store the light bulb's switch states. Initially the state is false because the bulb switch is OFF.

const [switchOff, switchOn] = React.useState(false);

State is another tool that assists us to contain information that we want to manage inside our component. It is a local storage for data to it's own component. Henceforth it can not be passed to other component because unlike "Props," state are private to the enclosed component.

State is used for keeping and managing data, whereas Props are used to pass data to another component. State data can be modified unlike Props. The state in a component can change over the period of time depending upon the user.