State in ReactJS

State In React

The State of a component is an object that holds some information that may change over the lifetime of the component. Let's understand the concept with an example of our daily life. Let’s say there is a bulb that is turned off. When I turn the switch on, the bulb turns on. So basically, the bulb has 2 states, on and off. When an action is performed i.e.(turning the switch on here is an action) the state changed from off to on. See the below image so that you can understand the basic concept.

The state is an updatable structure that is used to contain data or information about the component. The state in a component can change over time. The change in state over time can happen as a response to user action or system events. A component with the state is known as stateful components or class components.

Refer here for class and functional-based components.

Handling state

Handling state was only possible in a class component until React 16.8 was released. But when React Hooks(useState) was introduced, it allows developers to write stateful functional components. Hooks in complete detail we will study later on.

State in functional components

To use state, in a functional component, we need to use useState Hook, which takes an argument of the initial state i.e. the count is set to 0 initially, and then on button click using setCount, the variable count is incrementing and rendered on the screen in a span tag.

const Increment = () => {
 const [count, setCount] = React.useState(0);

 return (
   <div>
     <span>count: {count}</span>
     <button onClick={() => setCount(count + 1)}>Click</button>
   </div>
 );
};

State in class components

Constructor and its purpose

A component begins its life when it is instantiated. The constructor is called with the initial set of props before the component is mounted. In this function, we perform any initialization logic and set the component’s initial state. For components that don’t have a state, the default constructor is automatically called. Below are the main purpose:-

1. The constructor is a method used to initialize an object’s state in a class. It is used for initializing the local state of the component by assigning an object to this. state.
2. It is used for binding event handler methods that occur in your component.

When you implement the constructor for a component, we have to super(props) method before any other statement. If we do not call this method, this.props will be undefined in the constructor and can lead to bugs.

super() will call the constructor of its parent class. This is required when you need to access some variables from the parent class. In React, when you call super with props. React will make props available across the component through this.props.

If we have a constructor then super() is mandatory:

class App extends React.component {
    constructor(){
        console.log(this) //Error: 'this' is not allowed before super()

    }
}

The reason why this is not allowed before super() is because this is uninitialized if super() is not called. However, even if we are not using this we need a super() inside a constructor because ES6 class constructors MUST call super if they are subclasses. Thus, you have to call super() as long as you have a constructor.

Here is how we implement a class component in React.

class Increment extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }
export default Increment;

We can’t call setState() method directly in the constructor().The constructor only uses this.state to assign the initial state, and all other methods need to use set.state() method.

Mutation In React

Hope you understand the state in React. Happy React Coding.