5.2: setState

An ultra important method in React is setState(). Remember that state is all about interactivity and driven by changes in the DOM. We set the initial state in the constructor with this.state, but what about when something changes? For that, the primary method you would use to update the user interface in response to event handlers and server responses is setState().

Take a minute to read more about setState(). It is one of the most used tools for a React developer.

For right now, we just need to know that setState() is the catalyst in the render method being fired if the DOM has changed and an event has taken place.

Let's play around with setState() by building a traditional counter. Replace the code in ClassComponentDemo with the following:

import React, { Component } from 'react';

export default class ClassComponentDemo extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    incrementCount = () => {
        this.setState(
            { count: this.state.count + 1 }
        );
    };

    render() {
        return (
            <div className="main">
                <div className="mainDiv">
                    <ClassComponentNotes />
                    <hr />
                    <h3>Smash that like button!</h3>
                    <button onClick={this.incrementCount}>
                        Likes: {this.state.count}
                    </button>
                </div>
            </div>
        );
    }
}

const ClassComponentNotes = function () {
    return (
        <div>
            <h1>Class Components</h1>

            <p>Class components are considered the "React way" of writing components.</p>
            <dl>
                <dt>ES6 JS Classes</dt>
                <dd>Built on these, must understand them</dd>
                <dt>must extend Component </dt>
                <dd>Class components need to extend the React Component.</dd>
                <dt>render()</dt>
                <dd>Class components must always have a render method.</dd>
                <dt>export</dt>
                <dd>Only one class component exported per file.</dd>
            </dl>
        </div>
    );
};

Console Logs

Later on we'll show you a way to see the order of events in a component, as each one has its own lifecycle method. console.log statements are still very useful in understanding an application. Below, we added a few in the increment() function and the render() function. Go ahead and add those methods and run the app.

******Code Omitted**********
    incrementCount = () => {
        console.log("increment called");
        this.setState(
            { count: this.state.count + 1 }
        );
    };

    render() {
        console.log("render called");
        return (
******Code Omitted**********

As you click the button, you should see the the incrementCount method fires, and then the render() method fires. Looking at this might make you wonder about bigger enterprise applications and just how many times the render function gets fired off. Also, start thinking about how each class component has its own internal render() method. This starts to get both extremely complex and extremely fun.

Let's go on to a