Introduction To State And Lifecycle (React) - Zero To Hero Series - Part Four

This is the fourth article in ReactJS – Zero to Hero Series. I will recommend reading the first three articles (link given below), before going through this article.

• ReactJS Fundamentals - Zero To Hero Series - Part One
• React Components - Zero To Hero Series - Part Two
• Introduction To JSX And Rendering Elements - Zero To Hero Series - Part Three

In this article, we will see what State and Lifecycle are in React.

• React support a feature state that is similar to props, but it is private and fully controlled by the component.
• This feature is typically available to components defined as classes since they can support a local state which is completely controlled by the component.

So far, we have only learned one way to update the UI. We call ReactDOM.render() to change the rendered output.

Now, we will create a Clock component and we will learn how to make the Clock component truly reusable and encapsulated. It will set up its own timer and update itself every second.

We can write a Clock component which will be called from the function tick(), as shown below,

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

However, the above code misses a very crucial part. In the above code, the setting up of Timer and updating the UI should be the implementation detail of the Clock, however, the implementation is getting executed from the tick() function. Ideally, we want to write this once and have the Clock update itself, as shown below:-

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

To implement this, we need to add "state" to the Clock component.

How to convert a function to a Class

We can convert a functional component like Clock to a class in five steps,

1. Create an ES6 class with the same name that extends React.Component.
2. Add a single empty method to it called render().
3. Move the body of the function into the render() method.
4. Replace props with this.props in the render() body.
5. Delete the remaining empty function declaration.

class Clock extends React.Component {
    render() {
       return (
          <div>
              <h1>Hello, world!</h1>
              <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
         </div>
     );
  }
}

Clock is now defined as a class rather than a function.

How to Add Local State to a Class

We can add local state to a class in three steps,

1. Replace this.props.date with this.state.date in the render() method.
2. Add a class constructor that assigns the initial this.state
3. Remove the prop from the element

Adding Lifecycle Methods to a Class

In applications with many components, it is very important to free up resources taken by the components when they are destroyed.

For E.g. - We want to set up a timer whenever the Clock is rendered to the DOM for the first time. This is called "mounting" in React.

We also want to clear that timer whenever the DOM produced by the Clock is removed. This is called "unmounting" in React.

We can declare special methods on the component class to run some code when a component mounts and unmounts:

These methods are called "Lifecycle Hooks". The componentDidMount() hook runs after the component output has been rendered to the DOM.

So, the complete looks like below,

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Points to Remember for State

• Do not modify State Directly
• State Updates May Be Asynchronous
• State Updates are Merged

Summary

In this article, we saw how we could implement State and Lifecycle methods in React code.