Reactを学ぶXII〜React Hooksその3 第二引数を使う〜

■ はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Reactの基礎知識が増える
・ useEffectの第二引数を使った流れ

■ 前回まで

前回、useEffectメソッドを使ってライフサイクルの動きをいいねボタンで実演してきました

LikeButton.jsx

// 中略

    useEffect(() => {
        document.getElementById("counter").addEventListener("click", countUp);
        if (count >= 10) {
            counter(0)
        }
        return() => {document.getElementById("counter"}.removeEventListener("click", countUp);
    }):

// 中略

■ 例

今度は番外編として、第二引数を使った動きを見るので、まずは空の配列を渡します

LikeButton.jsx

// 中略

    useEffect(() => {
        document.getElementById("counter").addEventListener("click", countUp);
        if (count >= 10) {
            counter(0)
        }
        return() => {document.getElementById("counter"}.removeEventListener("click", countUp);
    }, []): // 空の配列を渡す

// 中略

最初のマウント時にしかイベントリスナーが設定されないので、ボタンを連打してもカウントが増えません

一度クリックをする　→　次のレンダーになる　→　次のレンダーになるとクリーンアップ関数が呼ばれてイベントリスナーが解除される　→　第二引数が空なので次のレンダーの時にはイベントリスナーが呼ばれないのでいいねが一度しかできない

いいねを何回もしたいと思った時、前回記事のパターン④で紹介をしましたlimitを使います

LikeButton.jsx

// 中略

const LikeButton = () => {
  const [count, counter] = useState(0);
  const [limit, release] = useState(true); // limitというstateを初期値trueで作ります

    useEffect(() => {
        document.getElementById("counter").addEventListener("click", countUp);
        if (count >= 10) {
            counter(0)
        }
        return() => {document.getElementById("counter"}.removeEventListener("click", countUp);
    }, [limit]): // 第二引数の配列にlimitを指定

// 中略

この状態でボタンをクリックしても、いいね数は1回しか増えません。
limitの値が変わらず、前回と今回を比較しても同じなので、クリーンアップ変数を2回目以降は
呼ばれなくても良いと判断されてしまいます

LikeButton.jsx

// 中略

const LikeButton = () => {
  const [count, counter] = useState(0);
  const [limit, release] = useState(true);

    useEffect(() => {
        document.getElementById("counter").addEventListener("click", countUp);
        if (count >= 10) {
            counter(0)
        }
        return() => {document.getElementById("counter"}.removeEventListener("click", countUp);
    }, [limit]):

    return (
      <>
        <button id={"counter"}>いいね数： {count}</button>
        <button onClick={() => release(false)}>更に追加でいいねする</button> // limitを解除するボタン
      </>
    );
};

// 中略

limitを解除するボタンを作ります（onClickイベントでuseState宣言したrelease関数を実行し、渡す引数の内容は状態をfalseにする）

もっといいねボタンを押すと、releaseメソッドによって、trueの状態からfalseに変わっていいね数が増えるようになりました
falseの状態なので2回目以降は数は増えませんが、もっと増やしたい場合は

LikeButton.jsx

// 中略

    return (
      <>
        <button id={"counter"}>いいね数： {count}</button>
        <button onClick={() => release(!limit)}>更に追加でいいねする</button>
      </>
    );
};

// 中略

releaseの処理をlimitの現在の値を反転させるようにすると

いいね数が増えるようになります