Thinkster

Understanding "state" in React components

What is state?

The heart of every React component is its “state”, an object that determines how that component renders & behaves. In other words, “state” is what allows you to create components that are dynamic and interactive.

If you’re not familiar with the idea of state machines (what React “state" is modeled after), this all might seem a bit abstract. However, this couldn’t be further from the truth. You’ve interacted with state-based systems your entire life — you just haven’t realized it!

A quick analogy to explain state

This might seem trivial, but please take a moment to consider this question: What’s the difference between water and ice?

That’s right — the temperature! Now, let's go one level deeper: what is “temperature”? The answer is that it’s a measurement of thermal energy — the key word for us being measurement, because that implies it is tracked with a known value (any number between absolute zero and absolute hot).

If you think about it, that’s kind of incredible. If you can change the value on a thermometer, that means you have the ability to put a piece of matter into a different state. With water, simply put it in your freezer (below 32F) and its state will change from liquid to a solid. If you put it on a hot stovetop (above 212F), its state will change from liquid to gas. All of this can be done just by changing one value: its temperature.

What if we could do the same thing with programs? What if we could define a set of properties that would determine how our program would behave in any situation, similarly to water’s relationship with temperature?

Creating a component with state

Let's continue our analogy with water by creating a <Water /> component. When initialized, this component will take the current temperature and render will output if it’s a solid, liquid or gas. Thus, the state of our <Water /> component will look like this:

{
    currentTemp: 60
}

We now have a Javascript object that we can use for our state, but how do we actually set it as our component’s state? When a React component initializes, you can set an initial state by defining a method called getInitialState that returns your desired state object:

getInitialState: function() {
    return {
        currentTemp: 60
    };
}

Perfect! The only thing remaining is to have the component tell us whether it’s a solid, liquid or gas. We can do this by accessing our currentTemp from our component’s state in the render method and compare it with boiling & freezing temperatures:

render: function() {
    // empty variable that will hold either "Liquid", "Solid", or "Gas"
    var stateOfMatter;

    // If temp is on/below freezing, it's a solid
    if (this.state.currentTemp <= 32) {
        stateOfMatter = 'Solid';

    // if temp is on/above boiling, it's a gas
    } else if (this.state.currentTemp >= 212) {
        stateOfMatter = 'Gas';

    // otherwise it's just a liquid
    } else {
        stateOfMatter = 'Liquid';
    }

    return (
        <div>
            <p>At { this.state.currentTemp }°F, water is considered to be a "{ stateOfMatter }" state of matter.</p>
        </div>
    );

}

Our component is now returning "At 60°F, water is considered to be a ‘Liquid' state of matter”; you can view the working code here!

Check this out — If you change the current temperature in getInitialState to 10, then click “Run” at the top of the page, the component should now say that it’s a “Solid” state of matter. Pretty cool, right?!

Now that you have a firm understanding of how state works in React, we can now start building truly interactive components. The next post will cover how to dynamically update state without refreshing the page by utilizing React’s setState method.