reactでタイピングゲームを作っています
wordsを被りなくランダムに表示するために下のコードのような実装を行っています.
"dependencies": {
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0"
}
const [words, setWords] = useState<Words[]>([...])
const [word, setWord] = useState<Word>({...})
const [index, setIndex] = useState<number>(0)
useEffect(() => {setWord(words[index])}, [words, index])
このような実装にすると, wordsとindexの両方の変更に反応してしまいます. どうにかして, missing dependencyを起こさずに, indexの変更のみに反応するようにしたいです.
useEffect(() => {
setWords((words) => {
setWord(words[index]);
return words;
});
}, [index]);
このように, wordsを依存関係に含めないようにするために, setWordsを使ってその中でwordsを参照するようにするのは正しい実装ですか? 可読性が悪い気がするし, あまり良い実装に思えません.
現在はonKeydownでindexを更新するような感じなのですが, それをやめて直接setWordをするような形にしたりするべきでしょうか?
この記事を見たのですが, 英語なのもありあまり理解できませんでした.
今回のアプリに限らず, useEffectの中でsetStateをこのような使い方をするのは良いのでしょうか?
よろしくお願いします.
どうにかして, missing dependencyを起こさずに, indexの変更のみに反応するようにしたいです.
linterのためにわざわざそんなコードを書くくらいなら個人的には単純にlinterを黙らせます.
そもそもの設計として,wordsを保持するコンポーネントは分けるべきなのかもしれません.(おそらくタイピングゲームのプレイ中に,単語リストを置き換える機会がそうそうない)
wordsの型がWords[]になってるのが間違いでないのなら,相当設計をとっ散らかしてる可能性がありますので,フローを見直してみてください.
@hamao
Questioner@hamao
Questionerこんにちは。
const [words, setWords] = useState<Word[]>([...])
を
const words = useRef<Word[]>([...])
のように定義するのはいかがでしょうか。
こうすればuseEffectの依存配列からwordsをなくすことが可能になります。
質問文の内容を拝見しているとおそらくwordsをstateで管理する必要はなさそうでしたのでこちらの対応方法を提案させていただきました。
仕様の詳細にも依りますが、indexが決まればそれを使ってwordも一意に決まるということであれば、そもそもindexとwordの2つのstateを持つ必要はなさそうですね
その場合具体的には、
const [words, setWords] = useState<Words[]>([...])
const [index, setIndex] = useState<number>(0)
const word = words[index]
とするだけでよく、useEffectは不要になります。
また以下はあくまで参考までにですが、wordをstateとしたままにするのであれば、単に以下とするのが普通だと思います
useEffect(() => {
setWord(words[index]);
}, [index]);
@hamao
Questioner