Reactの忘備録

# React hooks
プロジェクトで使用したReact hooksを簡潔に忘備録としてまとめた。
## useState
useStateは初期値とそれを更新する関数で構成される。
形は以下のような記述となる。
この場合、initialValueが空文字の初期値となる。そして、それを更新したい場合にsetInitialValueという関数を使用する。
```
const [initialValue, setInitialValue] = ''
```

例えば、以下の記述は初期値を空文字として設定し、ボタンをクリックすると`setInitialValue`関数が発火し、値が更新される。
```
import React, { useState } from 'react';

const YourComponent = () => {
  const [initialValue, setInitialValue] = useState(''); // 初期値を空文字列として設定

  const handleClick = () => {
    setInitialValue('新しい値'); // ボタンがクリックされたら、initialValueを'新しい値'に更新
  };

  return (
    <div>
      <h1>{initialValue}</h1> {/* initialValueの値を表示 */}
      <button onClick={handleClick}>値を更新</button> {/* ボタンをクリックするとhandleClickが呼び出される */}
    </div>
  );
};

export default YourComponent;
```

## useEffect
useEffectとは、「関数の実行タイミングをReactのレンダリング後まで遅らせるhook」を指す。
簡単に使えるが、調べると注意しなければいけない点も多く、むやみやたらに使うのは良くない印象。

形は以下の通りでコンポーネントのレンダリングや部分的な再レンダリングでuseEfefctが発火する。
監視する値の配列を空にすれば初回レンダリング時のみ発火し、`id`などを入れるとその値が変化する度に発火する。

ただし、本当にuseEffectで書くべきなのか？という問いを持ちながら使用することが重要
```
useEffect( コールバック関数, [ 監視する値の配列 ] );
```

https://zenn.dev/uhyo/articles/useeffect-taught-by-extremist
https://zenn.dev/fujiyama/articles/c26acc641c4e30
https://react.dev/learn/you-might-not-need-an-effect
## useForm
これはかなり便利なhooksの１つ。これまでは状態管理のuseStateなどを使用しながらフォームを作成する必要があったが、それらの記述も必要ない上に、バリデーションなども非常に簡単にシンプルに書ける。

例としてログインフォームを以下のように書ける。超便利。

捕捉説明
useFormをimportしてそれから分割代入で必要となるものを定義する。
以下の例では、register, handleSubmit, errorを使用している。

register: `inputRef={register({ required: true })}`のように記述すると入力必須にすることができる。またエラーメッセージを設定したり、入力パターンなども設定することができる。

name: フォームを送信する際に入力された値は`data`に格納される。その時にkeyの値となるのがnameで設定する値となる。
例えば`name="email"`とすれば、`{email:hoge@example.com}`のように`data`に格納される。したがって、使用する際は、`data.email`のように取り出すことができる。

```
import { useForm } from 'react-hook-form'
const { register, handleSubmit, errors } = useForm<LoginInputsProps>()
...
const onSubmit = async (data: LoginInputs) => {
  registerFunction({
    id: data.email,
    pass: data.password,
  })
}

return ( ...
import React from 'react';
import { useForm } from 'react-hook-form';
// その他のインポート

const YourComponent = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  
  const onSubmit = (data) => {
    // サブミット時の処理
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        inputRef={register({ required: "このフィールドは必須です", pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/ })}
        name="email"
        label="メールアドレス"
        fullWidth
        margin="normal"
        InputLabelProps={{ shrink: true }}
        error={!!errors.email}
        helperText={errors.email}
      />
      <TextField
        inputRef={register({ required: "このフィールドは必須です" })}
        name="password"
        type="password"
        label="パスワード"
        fullWidth
        margin="normal"
        InputLabelProps={{ shrink: true }}
        error={!!errors.password}
        helperText={errors.password}
      />
      <div className="mt-3">
        <Button type="submit" variant="contained" color="primary" fullWidth>
          ログイン
        </Button>
      </div>
    </form>
  );
};
```

# 個人的メモ
以下は今回使わなかったhooksに対するコメント
useContextはReduxやeasy-peasyなどの状態管理を使用することとなるとあまりいらない印象

useReducer: 必要な場面も出てきそうなので今後キャッチアップしたい。

useCallback/useMemo:　キャッシュの役割を果たす？重たい処理などを使用する場合には必要そうなのでキャッチアップしたい。

useRef: あまり使い所がわからなかった。イベントオブジェクトで良いのでは？と思ったが、きっとそうではないはずなので、その辺りの違いを調べたい。

useEffectも使用したもののどのような場面で使うべきかという理解までできていないためこちらも調べたい。