HomeResourcesSoftware DevelopmentReactJS Tutorial: A Step-by-Step Guide To Learn ReactReactJS State: SetState, Props and State Explained

Tutorial Playlist

ReactJS State: SetState, Props and State Explained

Lesson 3 of 12By Taha Sufiyan

Last updated on Jul 25, 2024310764
ReactJS State: SetState, Props and State Explained

Table of Contents

View More

React is the most popular front end JavaScript library today. From startups to big corporations, companies are adopting this widely used technology. Big names like Netflix, Airbnb, The New York Times, and many more are already using it on their websites and mobile applications. React’s popularity grew mainly due to how fast React web applications perform when compared to those developed using Angular. React introduced several concepts that overcame the drawbacks of previous front end frameworks.

This article will help you get familiar with a very important concept of React, the state. React State holds the data for a component. The component, in turn, returns the data contained within the state to the output.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

What Is ‘State’ in ReactJS?

The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. 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.  

class Greetings extends React.Component {

  state = {

    name: "World"

  };

  updateName() {

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

  }

  render() {

      return(

          <div>

              {this.state.name}

          </div>

      )

  }

}

  • A state can be modified based on user action or network changes
  • Every time the state of an object changes, React re-renders the component to the browser
  • The state object is initialized in the constructor
  • The state object can store multiple properties
  • this.setState() is used to change the value of the state object
  • setState() function performs a shallow merge between the new and the previous state

The setState() Method

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

Always use the setState() method to change the state object, since it will ensure that the component knows it’s been updated and calls the render() method.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Now that we are familiar with the concept of a state in React, let’s have a look at how it is implemented in a React web application.

class Bike extends React.Component {

  constructor(props) {

    super(props);

     this.state = {

      make: "Yamaha",

      model: "R15",

      color: "blue"

    };

  }

  changeBikeColor = () => {

    this.setState({color: "black"});

  }

  render() {

    return (

      <div>

        <h2>My {this.state.make}</h2>

        <p>

          It is a {this.state.color}

          {this.state.model}.

        </p>

        <button

          type="button"

          onClick={this.changeBikeColor}

        >Change color</button>

      </div>

    );

  }

}

State vs. Props

Let’s go through the fundamental differences between state and props: 

StateProps
Use CaseState is used to store the data of the components that have to be rendered to the viewProps are used to pass data and event handlers to the children components
⇙MutabilityState holds the data and can change over timeProps are immutable—once set, props cannot be changed
ComponentState can only be used in class componentsProps can be used in both functional and class components
UpdationEvent handlers generally update stateThe parent component sets props for the children components

And with that, we are now familiar with state, one of the essential concepts of React. This is one of the commonly asked topics in the ReactJS interview questions.

Check out the following video tutorial to get an in-depth understanding of ReactJS state -

Learn for Free! Get access to our library of over 2000+ learning videos. What are you waiting for?

Get Ahead of the Curve and Master React Today

Now that you have learned one of React’s most fundamental concepts, you may wonder how to obtain the skills necessary to take advantage of its rising popularity. Simplilearn offers comprehensive React.js training with Full Stack Developer - MERN Stack.

To learn more, check out our video lessons on ReactJS for beginners covering the fundamental concepts of React in greater depth. If you’re a web and mobile developer, React training will help you broaden your skills and your career horizons.

About the Author

Taha SufiyanTaha Sufiyan

Taha is a Research Analyst at Simplilearn. He is passionate about building great user interfaces and keeps himself updated on the world of Artificial Intelligence. Taha is also interested in gaming and photography.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, OPM3 and the PMI ATP seal are the registered marks of the Project Management Institute, Inc.