Reactでテトリスを作りたい(useEffectのInterval不具合)

Question

Reactの関数コンポーネントを使ってテトリスを作っているのですが、
キー入力時の useEffect と、インターバル設定時の useEffect がバッティングしてしまいます。

以下がコードです(一部)。

// スタートボタンを押したときに落下描画する
useEffect(() => {
	if (started) {
		const id = setInterval(() => {
			let tmp = fallen
			tmp.pop()
			tmp.unshift([0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
			setFallen(tmp)
			let draw_board = addMatrix(board, tmp)
			drawMatrix(draw_board)
		}, 1000);

		return () => clearInterval(id);
	}
}, [started, board, fallen]);

// キーボードイベントハンドラー
useEffect(() => {
	function handlekeydownEvent(event) {
		const { key, keyCode } = event;
		console.log(key, keyCode)
		if (keyCode === 39) { // Right
			let tmp = shiftRight(fallen)
			setFallen(tmp)
			let draw_board = addMatrix(board, tmp)
			drawMatrix(draw_board)
		} else if (keyCode === 37) { // Left
			let tmp = shiftLeft(fallen)
			setFallen(tmp)
			let draw_board = addMatrix(board, tmp)
			drawMatrix(draw_board)
		}
	}

	document.addEventListener('keydown', handlekeydownEvent)
	return () => {
		document.removeEventListener('keydown', handlekeydownEvent)
	}
}, [board, fallen])

変数群
board 落ち切った動かないブロックの配列
fallen 現在落ちているブロックの配列

これらを足し合わせて描画しています。
インターバルで落ちるときや、移動したときには fallen を変更して、足し合わせるようにしています。

見て頂ければわかるのですが、移動してしまうと、fallen が変更されてしまい、インターバルがリセットされ、また1秒待つことになります。

これを、移動したとしてもインターバルを維持したままにしたいのですが、どうすればいいかわかりません。

お分かりの方がいらっしゃいましたら、ご教授いただければ幸いです。
よろしくお願いします。

Answer 1

ちょっと複雑なアプリを作っていらっしゃるようなのでエスパーしてみます。codesandboxなどでコード全体を第三者が見れるようにしてもらうと回答がつきやすいかと思います。

質問の件は多分useEffectを全部走らせてるのが原因かなぁと思います。
useEffectはこう動いてほしいはずです。

1. keyhandlerを設定するuseEffect
2. 落下描画のタイマーのuseEffect
3. 落下描画のタイマーのクリーンアップ
4. keyhandlerのクリーンアップ

本来は1 -> 2<=>3 -> 4みたいに、2,3を繰り返してゲームが終わったときに4が走ってほしいのに、今はキーを押されたときに全部走ってるからバグになっているのだと思います。（繰り返しますが想像です）

なので解決策としては

function ParentScreen(){
    const [key, setKey] = useState()
    useEffect(()=>{
        // keyhandlerを設定
　　　　// setKey(keyCode)など？
    }, [])

    return <GameScreen pushedKey={key} />
}

function GameScreen({pushedKey}){
    useEffect(()=>{
        // 落下描画のタイマーの設定
    }, [...deps])
}

という感じになると思います。（一応同コンポーネントに2つのuseEffectをおいても同じことはできます）
今はkeyhandlerを設定するuseEffectで[board,fallen]といったdepsを指定していますが、ただのキーバインディングを設定するだけの機能が、これらゲーム内の状態を知らなければいけないのは不自然です。ので、keyhandlerを設定するuseEffectはdepsが空（ゲーム内の情報がない状態）になるはずです。

Comments

[cromalto]

ありがとうございました！無事に解決できました！
キーバインディングにDependencyはいらないという点を完全に見失っていました。

大変助かりましたorz