React 配列に入った文字列を順番に表示したいです

Question

前提・実現したいこと

配列に文字列が入っていて、その要素を一つずつ順番に表示したいです。
全て表示ではなく、イメージとしてはフラッシュ暗算のような感じになります。

Reactで時計を作るみたいにsetInterval等で簡単にできると思ったのですが、上手くできず困っております。

ちなみに、下のコードだと順番に表示はされるのですが三つ目くらいから挙動がおかしくなり、useEffectの部分が何度も高速で繰り返されるようになります（個人的にはライフサイクルメソッドに対する理解が浅いのだと思っています…）。

配列の要素を順番にログ出力することはできるのですが、表示となるとrederが関連してきてできなくなります。

該当のソースコード

import React from 'react'
import './App.css'

const App = () => {
  const words = [
    '私の',
    '名前は',
    '鈴木太郎',
    'です。',
    'よろしくお願いします。'
  ]
  const [count, setCount] = React.useState(0)
  React.useEffect(() => {
    setInterval(() => {
      setCount(count + 1)
    }, 1000)
  }, [count, setCount])

  return (
    <div className="App">
      {words[count]}
    </div>
  )
}

export default App

試したこと

その他には、setTimeoutを使ったり、メソッドを直接returnの中で呼び出したりしましたが、上記と同じような結果になってしまいました。

Answer 1

このコードだと、一度setIntervalしたものは外れませんので、countが切り替わるたびにsetIntervalが増えることになります。

  React.useEffect(() => {
    const timer = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    return () => clearInterval(timer);
  }, [setCount])

このように、useEffectの関数の返り値としてclearIntervalを行う関数を渡しましょう。なお、別件ですがsetCountも関数引数のほうがいいので、そのように書き換えています。

Comments

[wannabe]

回答ありがとうございます！
ちょうど同じタイミングで自分なりに解決方法を見つけてしまいました。
setIntervalをclearしないといけないのですね。初めてまともに使う関数で十分に理解できていませんでした。ありがとうございます！

Answer 2

import React from 'react'
import './App.css'

const App = () => {
  const words = [
    '私の',
    '名前は',
    '鈴木太郎',
    'です。',
    'よろしくお願いします。'
  ]
  const [word, setWord] = React.useState('')
  let index = 0
  const wordCount = words.length
  React.useEffect(() => {
    setInterval(() => {
      setWord(words[index++])
    }, 500)
  }, [setWord, index])

  return (
    <div className="App">
      {word}
    </div>
  )
}

export default App

こちらのコードで無事、思っていた通りに表示されました。
ありがとうございました。

Comments

[maisumakun]

このコードだと「たまたま動いているだけ」というところです。

なにかの拍子にコンポーネント全体の再描画が入ると、indexが複数になってわけのわからない動作に陥ることが考えられます。

[wannabe]

そういうことになってしまうのですね…。
setIntervalをしたらすぐにクリアしてあげる必要があるのですね。
アドバイスありがとうございます！