はじめに

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

目次

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

説明

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

useState

こちらは値の状態を保持するhooksになります。コードで説明していきます。
以下は、カウントアップボタンが押されたと同時に、countの値を1ずつ更新していくコードになります。

ボタンが押されて、画面の数字が更新されるのは、
更新関数のsetCountが呼び出されるたびに、画面が再レンダリングされるためです。

useEffect

これは、useEffect内に書いた処理の発火のタイミングを設定できるhooksになります。
サンプルコードは以下です。

useEffectでは、第二引数に設定した値が更新されたタイミングで、中の処理を実行します。

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

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

なので、

useCallback

これは再レンダリング時に、関数も一緒に実行されないようにするhookです。
コンポーネント化したファイルなどに書いた関数に設定することが多いです。
以下がサンプルコードです。

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

useMemo

useMemoはuseCallbackに似ています。
useCallbackは関数のメモ化に対し、useMemoは変数のメモ化をします。
サンプルコードです。

このように書くと、count2が更新された場合は、メモ化している中の処理は実行されないため、無駄な処理を減らすことができます。

最後に

書いていないhooksは追記していきます。

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

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