## はじめに
Reactでは必須のhooksについてまとめていきます。

## 目次
今回まとめていくhooksは以下になります。
**・useState**
**・useEffect**
**・useCallback**
**・useMemo**


## 説明
ここから説明していきます。

### useState
こちらは値の状態を保持するhooksになります。コードで説明していきます。
以下は、カウントアップボタンが押されたと同時に、countの値を1ずつ更新していくコードになります。
![img](/mosaic-code.jpg)
ボタンが押されて、画面の数字が更新されるのは、
更新関数のsetCountが呼び出されるたびに、画面が再レンダリングされるためです。

### useEffect
これは、useEffect内に書いた処理の発火のタイミングを設定できるhooksになります。
サンプルコードは以下です。
![img](/mosaic-code.jpg)
useEffectでは、第二引数に設定した値が更新されたタイミングで、中の処理を実行します。

No.1では、第2引数で[]を指定しています。これは、画面が読み込まれた際に、中の処理を実行することになります。

No.2では、第2引数でcountを指定しています。なので、count変数が更新された際に、中の処理を実行することになります。

なので、


### useCallback
これは再レンダリング時に、関数も一緒に実行されないようにするhookです。
コンポーネント化したファイルなどに書いた関数に設定することが多いです。
以下がサンプルコードです。
![img](/mosaic-code.jpg)
このようにshowCounterをuseCallbackで囲むと、この関数が再レンダリング時に呼ばれなくなります。
このように、無駄な処理を実行しないようにするためにuseCallbackを使用します。

### useMemo
useMemoはuseCallbackに似ています。
useCallbackは関数のメモ化に対し、useMemoは変数のメモ化をします。
サンプルコードです。
![img](/mosaic-code.jpg)
このように書くと、count2が更新された場合は、メモ化している中の処理は実行されないため、無駄な処理を減らすことができます。


## 最後に
書いていないhooksは追記していきます。

他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)
[cv:issue_marketplace_engineer]

## はじめに
Reactでは必須のhooksについてまとめていきます。

## 目次
今回まとめていくhooksは以下になります。
**・useState**
**・useEffect**
**・useCallback**
**・useMemo**


## 説明
ここから説明していきます。

### useState
こちらは値の状態を保持するhooksになります。コードで説明していきます。
以下は、カウントアップボタンが押されたと同時に、countの値を1ずつ更新していくコードになります。
```
// setCountは値(count)を更新する関数。
// useState(0)の0はcountの初期値になる。
const [count, setCount] = useState(0);

// ボタンを押されたときに更新関数を呼び出して、countの値を更新する。
const onClickCountUp = () => {
  setCount(count + 1);
}; 

// HTML↓
// 更新される値を画面に表示
<p className='mb-10'>{count}</p>
// ボタンが押されると、更新関数を呼び出す関数を呼び出す。
<button onClick={onClickCountUp}>カウントアップ</button>
```
ボタンが押されて、画面の数字が更新されるのは、
更新関数のsetCountが呼び出されるたびに、画面が再レンダリングされるためです。

### useEffect
これは、useEffect内に書いた処理の発火のタイミングを設定できるhooksになります。
サンプルコードは以下です。
```
<p className='mb-10'>{count}</p>
<button onClick={onClickCountUp}>カウントアップ</button>

useEffect(() => {
    console.log("hooks")
  }, [])

// No.1
const onClickCountUp = () => {
  setCount(count + 1);
}; 

// No.2
useEffect(() => {
    console.log("カウントアップ")
  }, [count])
```
useEffectでは、第二引数に設定した値が更新されたタイミングで、中の処理を実行します。

No.1では、第2引数で[]を指定しています。これは、画面が読み込まれた際に、中の処理を実行することになります。

No.2では、第2引数でcountを指定しています。なので、count変数が更新された際に、中の処理を実行することになります。

なので、


### useCallback
これは再レンダリング時に、関数も一緒に実行されないようにするhookです。
コンポーネント化したファイルなどに書いた関数に設定することが多いです。
以下がサンプルコードです。
```
const [counter, setCounter] = useState(0);

  const showCounter = useCallback(() => {
    alert('コールバック')
  }, [counter])

<Practice showCount={showCounter}/>
```
このようにshowCounterをuseCallbackで囲むと、この関数が再レンダリング時に呼ばれなくなります。
このように、無駄な処理を実行しないようにするためにuseCallbackを使用します。

### useMemo
useMemoはuseCallbackに似ています。
useCallbackは関数のメモ化に対し、useMemoは変数のメモ化をします。
サンプルコードです。
```
const [count1,setCount1] = useState(0);
  const [count2,setCount2] = useState(0);
  const countUp = (count1: number) => {
    count1 * 2
  };
  const baiCount = useMemo(() => countUp(count1), [count1]);
```
このように書くと、count2が更新された場合は、メモ化している中の処理は実行されないため、無駄な処理を減らすことができます。


## 最後に
書いていないhooksは追記していきます。

他にも記事を書いているので、良ければ見ていってください。

[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)


はじめに

目次

説明

useState

続きを読むには単価診断を受けてください（30秒）