State in React

Introduction
In the previous article of React.JS | Components, we have learned that feedback components can be broadly classified into functional and class components. It can also be seen that the functional components are faster and much easier than the class components. The primary difference between the two is the availability of the state.

What is the State?
State is a plain JavaScript object used by the feedback to present information about the current state of the component. It is managed in the component just like any variable declared in a function. Proper use of the state implies that no one applies direct changes to the state variable, since it will not be considered a change by response. Instead we should go through it using setstate() which is the function that determines the updates of the state object.
However, setState() does not always update the material immediately. This may delay the batch or update until later. This turns this.state reading into a possible loss to setState().
Difference of Props and State.
The main difference between a props and a state is that the state is controlled by the internal and the component while the prop is external and the component is controlled by whatever is rendered.React hooks usestates and other methods can be used in states, class components, functional components when props do not have this limitation.Although the props are set by the parent component, the state is usually updated by the event handlers. For example, let us consider toggling the theme on the messenger IDE page. This can be applied using the state where the potential values ​​of the state can be either light or dark and after selection, the color of the IDE changes.

Conventions of Using State in React
The state of an element should exist throughout life, thus we must first have some initial state, to do this we must define the state in the class constructor of the element. We can use the following sample format to determine the status of any class.
Class MyCourse extends React.Component{ constructor(props) {
super(props);
this.state = { attribute : "value" };
}
}
State should never be updated explicitly
The react uses an observable object as a state that observes what has changed in the state and helps the element to behave accordingly. For example, if we update the status of any of the elements as below, the webpage will not render itself because it will not be able to detect response status changes.The react provides its own method setstate(). The setState() method takes a single parameter and expects an object so the set of values ​​should be updated. Once updated, the method implicitly calls the render () method to repaint the page.
State updates are independent
A component's state object can have multiple attributes, and React allows the use of the setstate() function to update only one subset of those attributes, as well as the use of multiple setState () methods to independently update the value of each attribute.React internally merges setstate() methods or updates only those features that are need. For example-
this.state = {
darkTheme: False,
search: ''
};
Conclusion
We should have a clear idea of ​​the state in the react after viewing the article, but we can add user-defined functions in addition to the constructor and render method.We can create user-defined functions within a class.If the response is a canvas that represents the status of your application at any given time, then it is really important that the state is correct.