React Basic Hooks - useEffects sample

by pizza_hamburger_chicken

HTML

<div id="root"></div>
<div id="other-div"></div>

CSS

body {
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  text-align: center
}

#root, #other-div {
  width: 100%;
}

React

const {useState, useEffect} = React;

const AnimationNumber = ({ number }) => {
  // ------------ useRef
  // ------------ useState
  const [numberForCount, setNumberForCount] = useState(0);
  // ------------ useEffect
  useEffect(() => {
    let count = 0;
    const id = setInterval(() => {
      if (count >= number) {
        clearInterval(id);
      } else {
        console.log(++count);
        setNumberForCount(count);
      }
    }, 0.01);
  }, []);
  // ------------ methods
  // ------------ event methods
  // ------------ api methods
  return (
    <div
      data-target={number}
    >
      <strong>
        <span>{numberForCount}</span>
      </strong>
      
    </div>
  );
};

function Example() {
  return (
    <div>
      <AnimationNumber number={700}  />
      <AnimationNumber number={100} />
      <AnimationNumber number={470}  />
    </div>
  );
}

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