React

react hooks render twice demo

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

React

const { useState, useEffect, } = React;

class MyClass{

  constructor(callback, timeOut){

    // call callback in timeOut milliseconds
    this.timeOutId = setTimeout(() => {
      callback();

      }, timeOut)

  }

  clearTimeOut(){

    clearTimeout(this.timeOutId);

  }

}


function MyComponent(){

  var [count, setCount] = useState(0);

  // component did mount
  useEffect(() => {
    let myClass1 = new MyClass(funcToCallback, 1000);
    let myClass2 = new MyClass(funcToCallback, 3000);

    // when component unmounts, clear the timeouts of MyClass instances
    return () => {

      myClass1.clearTimeOut();
      myClass2.clearTimeOut();

    }
  }, []);


  // counter state updated
  useEffect(() => {

    console.log("COUNT UPDATED TO: ", count);

  }, [count])

  // get counter and increment it by 1
  function funcToCallback(){

    console.log("CALLBACK CALLED");
    let newCount = count + 1;
    incCount(newCount);

  }

  function incCount(newCount){

    console.log("NEW COUNT: ", newCount);
    setCount(newCount);

  }

  return (
    <div>
      COUNT: { count }
    </div>
  )

}



ReactDOM.render(<MyComponent />, document.querySelector("#app"))