ProgressBar

() => {
  // Ref is used to store data out of the component context
  // it is required for correct setInterval work
  const state = React.useRef({ value: 25, interval: null }).current;
  const [value, setValue] = React.useState(25);

  const resetProgress = () => {
    state.value = 0;
    setValue(state.value);
  };

  const stopProgress = () => {
    clearInterval(state.interval || 0);
    state.interval = null;
  };

  const incrementProgress = () => {
    const nextProgress = state.value + 1;
    if (nextProgress === 100) stopProgress();
    state.value = nextProgress;
    setValue(nextProgress);
  };

  const launchProgress = () => {
    if (state.value === 100) {
      resetProgress();
    }
    if (!state.interval) {
      state.interval = window.setInterval(incrementProgress, 250);
    } else {
      stopProgress();
    }
  };
  
  return (
    <>
      <L.ProgressBar value={value} valueRender={() => null} />
      <br />
      <br />
      <L.Button onClick={launchProgress}>{state.interval !== null ? 'Stop' : 'Launch'} progress</L.Button>
      {' '}
      <L.Button onClick={resetProgress}>Reset progress</L.Button>
    </>
  );
}