[React] React Hooks のはなし。

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( ( ) => {
   //ここに実行させたい処理をかく
}, [ ] ));

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

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

React Hooks の注意点。

最後に一つ注意点として、Hooksはループ内や条件分岐、ネストされた関数内ではなく、必ずトップレベルのみで使用するようにしてください。あらゆるreturn文よりも前に記述するように意識します。

よって

if (条件) {
  useEffect を使用
}

ではなく、

useEffect( ( ) => {
   if (条件) { 条件による処理 }
}, [ ] ));

というような書き方にしましょうということです。下記Reactの公式ドキュメントにもあるので、詳しくは下記からも参照できます。

https://ja.reactjs.org/docs/hooks-rules.html

[React] React Hooks のはなし。まとめ

以上、React Hooks のはなし。でした。

React Hooks は、非常に便利でこれから主流になっていく書き方だと思うので、ぜひ抑えておきたい部分です。

今回紹介したHooks 以外にも種類があるので、まだまだ奥が深いですが、今回はこの辺で。

最後までお読みいただき、ありがとうございました！