useStateでstateが更新されない

Question

実現したいこと

概要

useState()でstateの値が更新されないので、更新したい。

詳細

useStateでconst [isStart, setIsStart] = useState(false);を定義しています。
またisStartを更新する関数として、以下二つの関数を定義しています。

    const startGame = () => {
        setIsStart(true);
    };
    const endGame = () => {
        setIsStart(false);
    };

私の想定では、スペースキーをクリックすれば、isStartがtrueに、escキーをクリックすれば、isStartがfalseになると思っているのですが、
スペースキーをクリックしても、case 32のconsole.log(isStart)ではfalseと出力されます。
その後、escキーを押してもisStartが更新されていないか、ifブロックに入ってくれません。

このコードでは、stateは更新されないのでしょうか？

発生している問題

useState()でstateの値が更新されない。

該当のソースコード

import React, { useCallback, useEffect, useState } from 'react';

const Typing = () => {
    const [isStart, setIsStart] = useState(false);
    const startGame = () => {
        setIsStart(true);
    };
    const endGame = () => {
        setIsStart(false);
    };
    const onClickKey = useCallback((event) => {
        switch (event.which) {
            // スペースキーコードは32。
            case 32:
                console.log(isStart)  // falseと出る
                startGame();
                break;
            // エスケープキーコードは243。
            case 27:
                if (isStart) {
                    console.log(isStart)  // isStartがずっとfalseのためこのブロックに入らない
                    endGame();
                };
                break;
            default:
                break;
        }
    }, [isStart]);

    useEffect(() => {
        document.addEventListener("keydown", onClickKey, false);
    }, []);

    return (
        <div className="typing">
            <Timer
                isStart={ isStart }
            />
        </div>
    )
}

export default Typing

試したこと

useState()でstateが更新されないことをググってみたが、パッとした記事が見つかりませんでした。

Answer 1

結論

keyDownEventの登録をonClickKeyの更新に依存させます。

  useEffect(() => {
    document.addEventListener("keydown", onClickKey, false);
    return () => document.removeEventListener("keydown", onClickKey);
  }, [onClickKey]);

説明

私の理解が間違っている可能性がありますが、簡単に説明します。
useStateによって使用できるisStartは(おそらく)レンダリングごとに別の値参照を持ちます。
setIsStartは同じ関数参照を持ちます。

document.addEventListener("keydown", onClickKey, false)で登録したonClickKey関数は初回レンダリングのisStartのみを参照し、それ以降のレンダリングで更新されたisStartを捕捉することはできません。setIsStartによって更新だけは出来ますが、更新された値による条件分岐は行われず、endGameは永久に実行されることはありません。

結論で示したコードでは、isStartに依存するonClickKeyに依存してイベントの再登録を行っています。これにより、isStartが更新された時に新しい参照を使用して関数が作成されるため、新しい値での条件分岐（など）が可能になります。

Comments

[k_a]

Reactで`addEventListner`などの手続き的なイベント付与は（私も使いますが）おそらく邪道なので、通常であればあまり問題にならないのかな、と思います。
宣言的なイベント付与`onClick={hoge}`はレンダリングの度に新しく登録されるので、手続き的な書き方でもこれに則って回答の様に毎回イベントを登録し直すのが良さそうです。

（私もこの回答で初めて考えたので本当に全くの検討違いの可能性はあります）

[react.js]

ご指摘の通りで、やりたいことは実現できました。ありがとうございました。
addEventListnerはReactでは使わない方が良いみたいですね。

より良い方法をもう少し探してみます。

Answer 2

React本家ドキュメントのHandling Eventsの中に

When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.

と書いてある。これを破って、Reactを使っている中で addEventListener すると、（予想外の）意図しないことが起こると思っていたほうがよい。実際、質問にあるコードのまま動かすと、

React Hook useEffect has a missing dependency: 'onClickKey'. Either include it or remove the dependency array react-hooks/exhaustive-deps

という警告が表示されるので、この警告に従って、useEffect の dependency(第二引数）の配列に onClickKey を追加すると警告は消えるが、スペースキーとエスケープキーを交互に何度も押すと、そのたびに新しいonClickKeyがdocumentにaddEventListenerされてしまうので、それまでに追加されていた複数のonClickKeyの各々によって console.log(isStart)されてしまって、意図していた結果（＝スペースキーまたはエスケープキーの一回の押下によって、console.log(isStart)が一回だけ実行されて、isStartが一度だけ出力される。）とは違った結果になってしまう。

Comments

[react.js]

ご回答ありがとうございます。
addEventListenerはReactでは使用しない方がいいようですね。
とすると、jsxの中でonKeyPressに関数を渡すやり方がセオリーなんでしょうか？

[退会済みユーザー]

そうですね。
キーボード入力を受けつける <div> だったりのonKeyPress propにキー押下時のハンドラを設定するのがよいかと思います。つまり

const handleKeyPress = useCallback((event) => {　・・・ });

というハンドラを作っておいて

<div onKeyPress={handleKeyPress} ・・・

とするということです。（ちなみに、onXXX prop に設定するハンドラの変数名は、handleXXXのように、
handle をプレフィクスにする慣例がしばしば見られます）

Reactのコンポーネントの中で、document. addEventListener するコードを書きそうになったら、
「怪しいコードを書こうとしているな・・・」と思ったほうがよいかもしれません。

[react.js]

理解できました。
Reactのセオリーが知れて良かったです。
本当にありがとうございました。