React Hooks
React 16.8
から追加された
React
の新機能.
フックとは、関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。
https://ja.reactjs.org/docs/hooks-overview.html
ステートフル
な
ロジック
は
再利用
が難しい.
高階コンポーネント
などの利用で対応されていた.
ステートフル
な
ロジック
を
コンポーネント
から抽出して単独で
テスト
したり
再利用
したりできるようになる.
無関係な処理がタイミングの関係で同じ
componentDidMount
などに書かれていて
保守性
が低い.
クラス
は難しい.
事前コンパイル
などの
最適化
に問題がある.
ルール
関数
の
トップレベル
でのみ呼び出すこと.
FunctionalComponent
の内部または
custom hook
内でのみ呼び出すこと.
条件分岐
内部で呼び出してはいけない.
React Hooks
は
レンダリング
時に呼び出される順番によって
useState
の対応を管理しているため,処理をスキップされると対応関係が壊れる.