[React] React Hooks のはなし。

2022年11月5日

React hooks とは。

React hooks とは、簡単に言うと『関数コンポーネントから state や Life Cycle を使用できる』ような関数群のことです。

関数コンポーネントから状態（state）管理をしたり、ライフサイクルの管理ができるようになったことで注目を浴びました。

React hooks ができたわけ。

ちょっとイメージしずらいと思うので、React Hooks ができた経緯をもう少し追ってみます。

React のコンポーネントには、

クラスコンポーネント
関数コンポーネント

の2種類があり、もともと存在していたクラスコンポーネントに加えて、関数コンポーネントが後発でした。

そんなこともあり、関数コンポーネントの方が記述量が少なかったり、シンプルな構成になっています。ただ欠点として、

『関数コンポーネントでは、状態管理やライフサイクル管理ができない』

という致命的な弱点がありました。

よって、

状態管理やライフサイクル管理 → クラスコンポーネント

state を持たない → 関数コンポーネント

というような棲み分けを行っていました。

しかし、関数コンポーネントでも状態管理やライフサイクル管理ができるようになったら便利だよね。って開発されたのが React Hooks です。

React Hooks で、できること。

その関数群とは、具体的にどのようなものなのでしょうか。Hooksには『Reactが直接提供している10種類の組み込みHooks』と『自作するカスタムHooks』 があります。

組み込みHooks は使用頻度の高い基本的なHooksとして知られる

useState
useEffect
useContext

とあまり使わない追加のHooks として知られる

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

が存在しています。

ちなみに自作するカスタムHooksに関しても、組み込みHooksの名前に沿って「useXxxxx」というような名前を付けることが推奨されています。

今回は基本的な組み込みHooksの2種類に焦点を絞ってみていきます。

React Hooks の useState で状態管理

useState は既述の通り、関数コンポーネント上で状態管理を行えるようになります。

使用方法としては

const [count, setCount] = useState(0);

のように

状態 → count
状態を更新する関数 → setCount
初期値の設定 → useState(0)

で構成されています。

流れとしては、useState(0) で状態 count に初期値が設定されます。そして、setCount(1)のような形で状態 count を 1 に更新するというような使い方になります。

React Hooks の useEffect でライフサイクル管理

useEffect は簡易的なライフサイクル管理と同様のことを関数コンポーネント内で行えるようになる関数です。内容的には、クラスコンポーネントのcomponentDidMount, componentDidUpdate, componentWillUnmount と同様の機能として使用することができます。

useEffect( ( ) => {
//ここに実行させたい処理をかく
}, [ ] ));

というような書き方です。

実行させたい処理に加えて、最後の [ ] の中には依存させる変数の配列を指定することができ、特定の変数に変化があった時にのみ実行することができます。