State in React

State in React

We've largely worked with functional React components that don't require state management in previous articles. The focus of this article is on state, its management, and the components that use it in React.

State is the most complicated aspect of React, and it's something that both newbies and skilled developers have trouble with. As a result, in this tutorial, we'll go through all of the fundamentals of state in React.

What is State?

The state is the data that is modified within your components. That is, you create a default value that you can alter depending on which component you send the data to or what you do with it. State allows us to keep and update information within a component without having to communicate with the parent component.

Only within a class component can state be used. If you expect a component to require to maintain state, create it as a class component rather than a functional one.

State is comparable to props, but unlike props, it is unique to a component and can only be managed by that component. The behaviour of components in earlier chapters was mostly determined by the props that were handed down to them. Because props are read-only, the components that receive them have no influence over them in certain instances.

Adding State to a Class Component

class Greeting extends React.Component {
  render(){
    return <h1>I’m a component in need of some state!</h1>;
  }
}

Adding state to the Greeting component above requires defining a function Object() method within the class component that assigns the initial state using this.state.

class Greeting extends React.Component {
  constructor(props) {
   super(props);
     // Define your state object here
     this.state = {
       name: ‘Arya’
     }
   }
   render(){
     return <h1>Hello { this.state.name }</h1>;
   }
}

It's important to note that the function Object() takes props as an input, which is then passed on to super (). When using the function Object(), you must include super().

It's not required to pass props unless you're using them in the component. It's not essential to supply props to either in constructor or super() in the Greeting component above, therefore the component can be constructed as follows:

class Greeting extends React.Component {
  constructor() {
    super();
    // Define your state object here
  }
  // Define your render method here
}

However, the React documentation suggests that you always pass props to ensure compatibility with future features.

this.state is used to initialize the state, but this.setState is used to make subsequent modifications. I'm going to use this. setState guarantees that the browser re-renders the components affected by the state change.

What does setState do?

setState() schedules a state object update for a component. When the state of the component changes, it re-renders.

How to use State Correctly

⮞ Do Not Change State Directly

⮞ Asynchronous state updates are possible.

⮞ Updates from different states are combined.

The first point necessitates not modifying state directly.

// Wrong
this.state.comment = 'Hello';

You can use setstate instead of that

// Correct
this.setState({comment: 'Hello'});

Difference of Props and State.

Props are also objects that carry information to manage the behaviour of that particular component, which sounds incredibly similar to States, but props and states are not the same. Let us distinguish between the two.

Conclusion: So there you have it, your journey into the React realm. We've started with State in React to get you familiar with why you'd use in React and what you can do with it.