we will get to know more about a very important concept of React, What is a state in react and how to use state in react, and also the differences between state and props. The React State holds the data for a component. The component, in turn, returns the data contained within the state to the output.



In this article, we are going to discuss what is a state in react? How to use state in react? What are the differences between state and props? in reactjs. It covers the following topics:

Contents

  • What is State in ReactJS?
  • What is the use of the setState() Method?
  • What are the differences between State and Props?
  • Conclusion


What Is State in ReactJS?

The state is a built-in React object that is used to maintain data about the component. A component’s state can change over time, whenever the state changes, the component will re-render. The change in state can happen as a response to user action or system-generated events and these changes determine the behavior of the component and how it will render in the UI.
import React, { Component } from 'react';

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: "NagiReddy"
    }
  }

  render() {
    return <h1>Welcome {this.state.name}</h1>
  }
}
export default Home

  • The ReactJs state can be modified based on the user actions
  • Whenever the state of an object changes, React Js re-renders the component to the browser
  • In the React Js Class component, the state object is initialized in the constructor
  • We use this.setState() is used to change the value of the state object in React Js
  • setState() function performs a shallow merge between the new and the previous state

What is The use of setState() Method?

The state can be updated in response to server responses,  event handlers, or prop changes. This can be done using the setState() method in React Js Class components. The setState() method enqueues all of the updates which are made to the component state and instruct React to re-render the component and its children with the updated state.

In React Js, always use the setState() method to modify the state object, since it will ensure that the component knows it’s been changed and calls the render() method.

Home.js
import React, { Component } from 'react';

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: "NagiReddy"
    }
  }

  changeName = () => {

    this.setState({ name: "Gajjela" });

  }

  render() {
    return (
      <div>
        <h1>Welcome {this.state.name}</h1>
        <button

          type="button"

          onClick={this.changeName}

        >Change Name</button>
      </div>
    )

  }
}
export default Home
Below Button click, the out is below



Below is the output, once you click on the button

What are the differences between State and Props?


State

1. In React Js, the state is used to store the data of the components that have to be rendered to the user interface
2. In React Js, the state holds the data to maintain and also can change over time
3.  In React, the state can be used in class components
4. Event handlers generally update state objects in React Js

Props

1. In React Js, Props are used to pass data and event handlers to the child components
2. In React Js, Props are immutable, once you set, props cannot be changed
3. In React Js, Props can be used in both functional and class components
4. The parent component sets props for the children components in React Js.

Conclusion


In this article, you understand one of the important concepts in React Js called state and also the major differences between state and props in React Js.


Thank you for reading this article.  I'll see you guys in the next one.