How to implement number changing animation using React.js?

Question

React

There is a function that should create animations of running numbers (in the fragment, the insertion into the HTML code is cut out) I don’t quite understand how to properly adapt it for a react application?

const outNum = (num) => {
        let t = Math.random(time/(num/step))
        let n = 0;
        let interval = setInterval(() => {
            n = n + step;
            if(n == num){
                clearInterval(interval)
            }
        }, t);
        return n;
    }

Answer 1

function Counter({ val, time }) {
  const [ currVal, setCurrVal ] = useState(0);

  useEffect(() => {
    currVal !== val && setTimeout(setCurrVal, time, currVal + 1);
  }, [ currVal ]);

  return <div>{currVal}</div>;
}

https://jsfiddle.net/jsxopeag/