What is State in React Js?

As opposed to the method of using props to pass data within components, declaring and using state is another way of giving components access to data. But while props should be immutable, state permits mutation of data.

State can be described as set of data that is managed by a specific component. The particular component has access to the data and can change it when required. For instance, for every user interaction on a website, the state is modified (re-rendered) to match the present value or data. State can also be seen as the present nature of a component and the present data that it carries or holds.

DECLARING STATE :

It is a very good practice to declare all your states in only one component and manage your other components from the parent component.

The App component is usually made the parent component because it is the component that gets rendered directly.

The benefit of this action is that it causes your app to have a central point of control which easies data maneuverability and flexibility. State can be declared in two ways:

Using class and constructors.
Using react hooks (useState).

Using class and constructors: You can declare state in a class by extending the react component. It exists as an object which contains the data of the component/components.

class App extends Component{
  constructor(props){
    super(props);
    this.state={
      persons: [
        {id:"oie9jd",name : "Haibo" , school: "FUTA", age:23},
        {id:"mdknel",name : "SHEIKH" , school: "FUTMINNA", age:25},
        {id:"ieur8e",name : "nioo" , school: "AIU", age:22}
      ],

      cities:[
        {id:"9ejhfnc",address: "Ovuike", street : "ternaml" },
        {id:"mdoee0",address: "Ovuike", street : "ternaml" }
      ],

      showPersons : false
     }
  }

Using react hooks: You can declare state by destructuring React.useState() which produces an array composed of state and a function (setState()).

MODIFYING STATE:

Usually, the states of our components is constantly changing because of user interactions with our website’s data.

Because of this, our website needs to update itself every time by re-rendering it’s content to make sure that it’s information remains up to date.

You can update the data in Stateful components (Compnents that bear state) by using the setState() function. This function carries an object in it bearing Key-value pairs. The keys represent your existing state properties and the values represent the updated statedata.

You should not modify state directly, rather use the setState function to update your state whenever a change occurs in your component.

The setState() method can also be asynchronous. This means that React may carry out multiple setState() updates at the same time to enhance performance.

PASSING STATE AS PROPS

It is very important for you to understand that React uses a unidirectional data flow pattern for state management.

This means that data from State flows in one direction only which is from the parent components to the state components.

For instance, if there are two or more child components bearing their respective state data, they cannot transfer data to each other but if their states are transported to their parent component, then they would be able to access it individually.

SUMMARY The concept of state can be very confusing to some students. But it is very important that you understand it because it makes our web applications build process more organized and also enhances their performance.

I sincerely hope this article helps you understand State better.

Thanks for reading.

If you have any questions, connect with me on : Twitter

Understanding The Concept Of State In React Js