ReactでuseStateを使わないプログレスコンポーネントを実装してみた

ReactでuseStateを使わないプログレスコンポーネントを実装してみた

使いどころはないですが、useStateを一切使わずにプログレスバーを実装してみました。大体の実装例はuseStateを使用して進捗率を管理するのが多いですが、違う実装ができるのではないかと気になったのでやってみました。

実装

仕組みは単純で、useEffect内でsetIntervalを使うことでプログレスバーが伸びているように見せています。refを渡すことでプログレスバーコンポーネントのwidthの値を操作できるようになります

import { forwardRef } from "react";

export const Progress = forwardRef<HTMLDivElement>(({}, ref) => {
  return (
    <div className="pt-auto h-1 w-full bg-gray-50">
      <div className="h-2 bg-gray-800" ref={ref} />
    </div>
  );
});

Progress.displayName = "Progress";

import { useEffect, useRef } from "react";

~
{
  const progressRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const intervalId = setInterval(() => {
      if(progressRef.current) {
        progressRef.current.style.width = `${parseInt(progressRef.current.style.width) + 5}%`;
      } else {
      }
    }, 750);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <ReadBookProgress ref={progressRef} />
  ) 
}

結果

あまりおすすめしないです