

## 目的

作成したカウント機能を使ってカスタムフックの作り方を学びたい。

## 状況

現在Reactを学習中で、コンポーネントの中でのuseStateの使い方を学びました。  
次は作成した処理をカスタムフックとして作成したいのですが、webで調べても作り方がいまいちわからなかったので自分のコードをを使うとどうなるのかをお聞きしたいです。

## 聞きたいこと

下記のコードのカウントダウン機能・アラート表示機能のロジックを分離させる際、どのように分割すれば良いのでしょうか？

## コード

[code]

    import { Link } from "react-router-dom";
    import { useState } from "react";
    
    export const CountPage = () => {
      const [count, setCount] = useState(0);
      const [alert, setAlert] = useState(false);
    
      const increment = () => {
        setCount(count + 1);
        setAlert(false);
      };
    
      const decrement = () => {
        if (0 < count) {
          setCount(count - 1);
        } else {
          setAlert(true);
        }
      };
    
      return (
        <>
          <div className="text-center">
            <h2>カウント画面</h2>
            <p>現在の値：{count}</p>
          </div>
          <div className="m-4 text-center">
            <button
              className="m-4 bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded"
              onClick={increment}
            >
              +
            </button>
            <button
              className="m-4 bg-red-400 hover:bg-red-500 text-white font-bold py-2 px-4 rounded"
              onClick={decrement}
            >
              -
            </button>
          </div>
          {alert ? (
            <p className="bg-red-100 border border-red-400 text-red-700 m-4 px-4 py-3 rounded relative">
              値を0以下にはできません。
            </p>
          ) : (
            ""
          )}
        </>
      );
    };
    
    
[/code]


CC BY-SA 4.0
2023-01-08T07:34:01.970
93242
2023-01-10T00:02:12.813
2023-01-08T13:30:36.260
46713
46713
question
reactjs
Reactで既存の処理をカスタムフックに分離させる方法を知りたい


`increment()` と `decrement()` で `alert` state
を更新しているところが、複雑さをもたらしているのではないかと思います。

`alert` state は `count` state より計算可能なため、 state ではなく `count`
を使って計算してしまってはどうでしょうか？

[code]

    const isNegative = count < 0;
    
[/code]

何を state として保持するかについては、以下記事がとてもわかりやすいのでおすすめです。  
<https://beta.reactjs.org/learn/you-might-not-need-an-effect>

そうすると複雑さが消えて、本題のカスタムフックへの抽出もシンプルになるかと思います。  
以下が抽出できそうですね。  
カスタムフックの作り方は以下記事を参考にしてみてください。  
<https://ja.reactjs.org/docs/hooks-custom.html>

[code]

    const [count, setCount] = useState(0);
    const increment = () => {
      setCount((prevCount) => prevCount + 1);
    };
    const decrement = () => {
      setCount((prevCount) => prevCount - 1);
    };
    
[/code]

もう一点、補足で指摘させていただきますと、 `setCount(count + 1)` のところ以下のようにした方が良いです。  
参照：  
<https://zenn.dev/stin/articles/use-appropriate-api>

[code]

    setCount((prevCount) => prevCount + 1);
    
[/code]

参考までに、私が試してみた Sandbox のリンクも貼っておきますね。  
<https://codesandbox.io/s/youthful-
shape-5nfsb2?file=/src/useCounter.jsx:143-182>

勉強頑張ってください！


CC BY-SA 4.0
2023-01-10T00:02:12.813
93273
2023-01-10T00:02:12.813
53321
93242
answer