ReactJS States Part 2

Let’s gradually introduce state in ReactJS.

We will make a digital clock.

First, let’s start with Functional Component without using state, so that we can refresh our knowledge.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

const Clock = () => {
    return(
            <div>{new Date().toLocaleString().split(" ")[1]}</div>
        );
}
setInterval(() => {
    ReactDOM.render(<Clock/>, document.getElementById("root"));
}, 1000);

After importing React and ReactDOM, I defined a function called “Clock”. This function returns the time by writing it into a <div>.

I also placed the rendering process in an interval with ReactDOM so that the DOM would be updated every second and our clock would run.

Now let’s leave the Functional Component and use class.

class Clock extends React.Component{
    render(){
        return(
                <div>{new Date().toLocaleString().split(" ")[1]}</div>
            );
    }
}

Let’s get the time value from the state section of our component. For this, we need to define a constructor within the component. We will define State in the constructor section.

class Clock extends React.Component{
    constructor(){
        super();
        this.state = {
            time: new Date().toLocaleString().split(" ")[1]
        }
    }
    render(){
        console.log(this.state.time)
        return(
                <div>{this.state.time}</div>
            );
    }
}

setInterval(() => {
    ReactDOM.render(<Clock/>, document.getElementById("root"));
}, 1000);

The state definition in the Constructor is made as Object Literal. Even though “setInterval” works, the time is not updated! We now get the time value from the state, and no matter how many times you render the component, the time does not change because the state does not change. Therefore, setInterval is no longer needed here. Let’s use setInterval in the component instead.

class Clock extends React.Component{
    constructor(){
        super();
        this.state = {
            time: new Date().toLocaleString().split(" ")[1]
        }
    }
    componentDidMount(){
        setInterval(() => {
            this.setState({
                time: new Date().toLocaleString().split(" ")[1]
            });
        }, 1000);
    }
    render(){
        console.log(this.state.time)
        return(
                <div>{this.state.time}</div>
            );
    }
}

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

There are two innovations called “componentDidMount” and “setState”…

During the initialization of a component, you can make various adjustments that determine the lifecycle of the component. Below are a few methods for doing this. I will talk about all of them in detail in my next article (Component Lifecycle).

getInitialState
getDefaultProps
componentWillMount
componentDidMount
shouldComponentUpdate … and more

We used “componentDidMount” in the code section above; It determines the operations to be performed after the component is rendered.

“setState” allows us to update the state of the component. The “state” part cannot be updated at all except “setState”. Otherwise, the lifecycle of the component will be disrupted.

There may be other literals defined in state, you may want to update each one separately as needed.

this.state = {
     date: "00.00.0000",
     time: "00:00:00"
}
....
this.setState({
     date: "01.01.1111"
});
this.setState({
     time: "01:02:03"
});

In this case, the state object will be merged automatically, don’t worry :)