ProgressRing in React Hooks

DemoError.jsx

import React, { useState, useEffect } from 'react';
import T from 'prop-types';
import Ring from './components/Ring';

const targetProgress = 95;

function DemoErrorRing() {
  const [progress, setProgress] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => setProgress(progress + 1), 10);
    return () => {
      if (progress === targetProgress) {
        clearInterval(interval);
      }
    };
  });
  return (
    <Ring progress={progress} />
  );
}

export default DemoErrorRing;

Ring.jsx

import React from 'react';
import T from 'prop-types';

function Ring({
  radius, stroke, progress, strokeColor, strokeLinecap,
}) {
  const innerRadius = radius - stroke * 2;
  const circumference = innerRadius * 2 * Math.PI;
  const strokeDashoffset = circumference - ((progress / 100) * circumference);

  return (
    <svg height={radius * 2} width={radius * 2}>
      <circle
        fill="transparent"
        stroke={strokeColor}
        strokeLinecap={strokeLinecap}
        strokeWidth={stroke}
        strokeDasharray={`${circumference} ${circumference}`}
        style={{
          strokeDashoffset,
          transition: 'stroke-dashoffset 0.35s',
          transform: 'rotate(90deg) scaleX(-1)',
          transformOrigin: '50% 50%',
        }}
        r={innerRadius}
        cx={radius}
        cy={radius}
      />
    </svg>
  );
}

Ring.propTypes = {
  radius: T.number,
  stroke: T.number,
  strokeColor: T.string,
  strokeLinecap: T.string,
  progress: T.number,
};

Ring.defaultProps = {
  strokeLinecap: 'round',
  strokeColor: '#572d88',
  radius: 80,
  stroke: 6,
  progress: 20,
};

SuccessDemoRing.jsx

import React, { useState, useEffect, useRef } from 'react';
import Ring from './components/Ring';

function useInterval(callback, delay) {
  const savedCallback = useRef();
  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    const id = setInterval(tick, delay);
    return () => clearInterval(id);
  }, [delay]);
}

const targetProgress = 95;

function SuccessDemoRing() {
  const step = 5;
  const [progress, setProgress] = useState(0);

  useInterval(() => {
    if (progress !== targetProgress) {
      if (progress + step > targetProgress) {
        setProgress(targetProgress);
      } else {
        setProgress(progress + step);
      }
    }
  }, 10);

  return (
    <Ring progress={progress} />
  );
}

export default SuccessDemoRing;