ComponentDidMount not working and no error is displaying

Question

class Clock extends React.Component {
state = { time: new Date().toLocaleTimeString() };
componentDidMount() {
    setInterval(() => {
        this.setState = ({ time: new Date().toLocaleTimeString()})
    }, 1000)
}
render() {
    return (
        <div className="time">
            the time is :{this.state.time}
        </div>
    );
 }
};

this is a simple clock react app where ComponentDidMount is not working

Answer 1

setState is a function:

this.setState({ time: new Date().toLocaleTimeString()})

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state.

Answer 2

setState is a function, it should be invoked, not assigned. Also don't forgot to delete the timer on unmount to prevent memory leak Here is the working example

https://codesandbox.io/s/silent-cookies-zwsog

Answer 3

well, setState will call some of the lifecycles of that component,re-render it and re-render all children of that component by the way, here is a working example https://codesandbox.io/s/blazing-resonance-kjoyi

import React, { Component } from "react";

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: null
    };
    this.handleSetTime = this.handleSetTime.bind(this);
    this.timer = null;
  }
  componentDidMount() {
    this.handleSetTime();
    this.timer = setInterval(this.handleSetTime, 1000);
  }
  handleSetTime() {
    this.setState({
      time: new Date().toLocaleTimeString()
    });
  }
  render() {
    const { time } = this.state;
    return <div className="time">the time is:{time}</div>;
  }
  componentWillMount() {
    clearInterval(this.timer);
    this.timer = null;
  }
}

export default Clock;

I suggest you to use ref to select a dom element and update it each second, by doing this, no re-render would be done, and because it gonna be a stateless component, it would have even better performance.

here is a stateful example with ref https://codesandbox.io/s/still-framework-xxxeg

import React, { Component, createRef } from "react";

class Clock extends Component {
  constructor(props) {
    super(props);
    this.ref = createRef();
    this.timer = null;

    this.handleUpdateTimer = this.handleUpdateTimer.bind(this);
  }
  componentDidMount() {
    this.handleUpdateTimer();
    this.timer = setInterval(this.handleUpdateTimer, 1000);
  }
  handleUpdateTimer() {
    this.ref.current.innerText = new Date().toLocaleTimeString();
  }
  render() {
    return (
      <div className="App">
        time is: <span ref={this.ref} />
      </div>
    );
  }
  componentWillUnmount() {
    clearInterval(this.timer);
    this.timer = null;
  }
}

export default Clock;

and finally, the best one, and stateless component using hooks https://codesandbox.io/s/silent-leftpad-cc4mv

import React, { useRef, useEffect } from "react";

const Clock = () => {
  const ref = useRef();
  useEffect(() => {
    setTimer();
    const timer = setInterval(setTimer, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  const setTimer = () => {
    ref.current.innerText = new Date().toLocaleTimeString();
  };

  return (
    <div className="App">
      time is : <span ref={ref} />
    </div>
  );
};

export default Clock;