개요

진짜는 css로 하는 편이 퍼포먼스는 좋다고 생각합니다만, 조금 귀찮았으므로 커스텀 훅을 준비해 제대로 실장해 보았습니다.

완성형

코드

// カスタムフック
const useDelayText = (delay, time, text) => {
  const [resultText, setResultText] = useState('');

  // 無限ループに入っちゃうので、useEffectで制御
  useEffect(() => {
    // １文字ずつの表示時間を計算
    const showIntervalTime = time / text.length;

    for (let index = 0; index < text.length; index++) {
      // 表示したい文字をスライス
      const t = text.slice(0, index + 1);

      // delayさせたいので、外側でsetTimeoutを入れる
      setTimeout(() => {
        // それぞれの文字数ごとにsetTimeoutでスライスした結果をsetしていく
        setTimeout(() => setResultText(t), showIntervalTime * (index + 1));
      }, [delay])
    }
  }, []);

  return resultText;
}

// 使い方
const First = memo(() => {
  const yusou = useDelayText(0, 1000, '車の輸送');
  const tax = useDelayText(1000, 1000, '税込価格');
  const sijou = useDelayText(2000, 1000, '市場最安値');
  return (
    <div className={styles.fv}>
      <p>{yusou}</p>
      <p className={styles.fv_yellow}>{tax}</p>
      <p className={styles.fv_red}>{sijou}</p>
    </div>
  )
});

궁리점

처음에는 delay 시킬 예정은 없었지만, delay 시키지 않는 것과 동시에 문자 나오게 되었습니다.
거기서, delay용의 인수를 우선은 준비해, 거기로부터 어떻게 할까-라고 10초 정도 바라보고 있으면,
「이제 1개 외측에 크게 setTimeout로 둘러싸면 좋겠지?」라고 되어 해 보면 잘 움직였습니다.

감상

범용적으로 사용할 수 있을지 모르고, css로 구현하는 편이 퍼포먼스는 좋다고 생각합니다.
그렇게 퍼포먼스도 의식하지 않고, 적은 문자수라면 이쪽이라도 좋을까-라고 생각하고 있으므로,
사용해 보자! 라고 생각해 어두워지면 기쁩니다! (LGTM 잘하고 있습니다)