How to do it...

Let's define our initial state. Let's see how it works the component's render method when the local state is updated:

1. Using our Home component, we are going to add a constructor and define our initial state:

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

  class Home extends Component {
    constructor() {
      // We need to define super() at the beginning of the 
      // constructor to have access to 'this'
      super();
    
      // Here we initialize our local state as an object
      this.state = {
        name: 'Carlos'
      };
    }

    render() {
      return (
        <div className="Home">
          {/* Here we render our state name */}
          <p>Hi my name is {this.state.name}</p>
        </div>
      );
    }
  }

  export default Home;

2. In this example, we are defining our local state in the constructor as an object, and in the render, we are printing the value directly. We are using super() at the beginning of the constructor. This is used to call the parent constructor, (React.Component). If we don't include it, we will get an error like this:

3. After we added super(), we need to define our initial state as a regular object:

  this.state = {
    name: 'Carlos'
  };

4. Updating our local state with this.setState(): Right now, this is just a state that is not being updated. That means that the component will never re-render again. To update the state, we need to use the this.setState() method and pass the new value of the state. We can add a setTimeout to update the name state after 1 second (1,000 milliseconds), so we need to modify our render method like this:

  render() {
    setTimeout(() => {
      this.setState({
        name: 'Cristina' // Here we update the value of the state
      });
    }, 1000);
    
    console.log('Name:', this.state.name);

    return (
      <div className="Home">
        <p>Hi my name is {this.state.name}</p>
      </div>
    );
  }

5. If you run this in your browser, you will see the first value of the state is Carlos, and 1 second after this it will change to Cristina. I have added a console.log to log the value of the state name. If you open your browser console, you will see this:

6. Updating our local state in the componentDidMount lifecycle method: You're probably wondering why is repeated so many times. It is simple; this is the way React works. Every time we update a state the method render is fired, and in this code, we added a setTimeout which updates the state after a second. That means that the render method is being called every second, causing an infinitive loop. This will affect the performance of our application, and that's why you need to be careful when you update a state. As you can see updating it in the render method is not a good idea. So, where should I update the state? Well, it depends on your application, but for now, I'll show you a method that is part of the React lifecycle called componentDidMount():

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

  class Home extends Component {
    constructor() {
      super();

      this.state = {
        name: 'Carlos'
      };
    }

    componentDidMount() {
      setTimeout(() => {
        this.setState({
          name: 'Cristina'
        });
      }, 1000);
    }

    render() {
      console.log('Name:', this.state.name);
 
      return (
        <div className="Home">
          <p>Hi my name is {this.state.name}</p>
        </div>
      );
    }
  }

  export default Home;

7. If you run this code and you see the console, now you will see this: