React State Readme

Overview

In this lesson, we'll dive into component state.

Objectives

  1. Explain what state is
  2. Explain the difference between state and props
  3. Show examples of how state is defined and updated

What's state?

Let's quickly talk about what state is in React. State is data that is mutated in your component. A component's state, unlike a component's props, can change during the component's life.

Consider the limitations of props: for a component's props to change, its parent component needs to send it new props (after which, the component would 'remake' itself with the new props). State provides us with a method to update the information within a component without requiring its parent to somehow send updated information.

Imagine that we have a single component which displays an integer. When a user clicks the component, it should increment its integer by 1. If we were to represent this integer value in the component using state, the component could increment itself without needing any fussy prop passing:

class MyComp extends React.Component {

  // we use the constructor to set the INITIAL STATE
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }

  // our increment method makes use of the 'setState' method, which is what we use to alter state
  increment = () => {
    const newCount = this.state.count + 1
    this.setState({
      count: newCount
    })
  }

  render() {
    return (
      <div onClick={this.increment}>
        {this.state.count}
      </div>
    )
  }
}

Take your time to read through the above code. Work through it line by line and make sure you are comfortable before moving forward.

Initial State and 'setState()'

In the example above, you will notice two new things that we haven't discussed yet: the setting of initial state in the constructor and the use of this.setState(). Let's explore both in turn:

Initial State

In order to understand why we are setting initial state in the constructor the most important thing to know is that the constructor method runs first when a component is made (and render() runs later!). Because we won't dive further into the React Component Lifecycle just yet, commit this mantra to heart:

We set initial state in the constructor because it runs first

...got it? Good. Don't forget. Now forget we even mentioned this new concept of 'Component Lifecycle' and stay focused on state.

Once we have provided a component with its initial state we can manipulate it later using the method: setState().

setState()

setState() is straightforward in its purpose: it sets/updates state! That's it! That's what it's there for. While simple in that way, there is one very important caveat about how it functions that we need to explore: it sets state asynchronously.

In order to understand why this is important, let's look at an example of setState() being used in a component. The following gif is of this component (pay close attention to the console.log()s:

class App extends Component {

  constructor() {
    super()
    this.state = {
      count: 0
    }
  }

  increment = () => {
    console.log(`before setState: ${this.state.count}`)

    this.setState({
      count: this.state.count + 1
    })

    console.log(`after setState: ${this.state.count}`)
  }

  render() {
    return (
      <div onClick={this.increment}>
        {this.state.count}
      </div>
    )
  }
}

What we are seeing is setState() functioning asynchronously. When we execute setState(), it is non-blocking. It fires off a message to the React component's inner workings saying: "Hey, you need to update state to this value when you have a chance." The component finishes doing its current task before updating the state. In this case, it finishes executing the increment function in full before updating the state.

It's not uncommon for new React developers to get 'bitten' by the asynchronous nature of setState() at least once. If setState() were not asynchronous, the two logs would not be the same number.

A Word of Caution

While component state is a very powerful feature, it should be used as sparingly as possible. State adds (sometimes unnecessary) complexity and can be very easy to lose track of. The more state we introduce in our application, the harder it will be to keep track of all of the changes in our data. Remember: state is for values that are expected to change during the components life.

Conclusion

  • state is for values that are expected to change
  • we assign initial state in the constructor
  • we update state with setState(), which is a method provided by the React.Component class
  • setState() is asynchronous

Resources

View Initial State on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us