[React]hooksまとめ

はじめに

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は追記していきます。

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

基本設計について
Vue.jsとNode.jsでチャットアプリを作った
Next.js×TypeScriptでTODOアプリを作成する