deve.K

エンジニアが未来を切り開く。

English

React Hook まとめ


スポンサーリンク

react画像

本日は初学者様用にReact.jsのHooksでよく用いられるのをまとめておきましてのでお納めください 

なるべく短めでざっくりとした説明させて頂きます。

詳しい解説は今後、個別で記事にしていきます。

useState()

Stateの機能をクラスを書く必要がなく扱えるようになります。

関数コンポーネントでのステートの管理をする為の保持・更新

引数には初期値を指定し

返されるstateはuseState()の第一引数に指定した値となります。

useEffect()

関数コンポーネントでの副作用を実行する為のHook

クラス時に用いられたライフサイクルを関数でも使用が可能となり、外部からAPIを経由してデータ取得やコンポーネントが更新する度に別の処理を実行するということが可能となります。

useContext()

Context APIを使用する事で子のコンポーネントとpropsを渡さなくてもデータの共有が可能となります

コンポーネントで階層が深くなった場合は、データの渡しが容易となります。

useReducer()

useStateの代替品でステートのコンポーネントの階層が深い、または前回のステートを元に新しい状態として作る場面で使用されます。

配列やオブジェクトの一部を操作する場合、前回の状態に依存した更新処理をする場合には useState の代わりに 『useReducer』 を利用することで、より簡潔に記述することが可能となります。



useMemo()

メモ化の機能を提供するHookとなる

メモ化された値を返します、依存配列の要素のいずれかが変化時、メモ化された値を再計算し

不要な計算やレンダリングを抑える事によりパフォーマンス向上がします。

useCallback()

メモ化されたコールバック関数を返しコンポーネントでの不要な再描画をスキップしパフォーマンス向上させ、useMemoと併用します。

useRef()

要素の参照を行います、コンポーネント内での書き換えが可能な値を、.currentプロパティ内に保持し

refオブジェクトを作成しHTML要素に指定しDOMを参照時useRef の current プロパティが更新されても、再レンダリングが起きる事がない部分がuseStateとの違いとなるDOM操作となります。

useImperativeHandle()

refが用いられた際の親コンポーネントインスタンスの値をカスタマイズし『forwardRef 』と組み合わせて使用します。

useLayoutEffect()

useEffectと似ていますが、異なる点があります それは実行時のタイミングとなります

useEffectは画面が描画された後に実行されますが、『useLayoutEffect』は画面に描画される前に処理を実行させます。

あまりにも重い処理の場合、レンダリングが遅延します。

useDebugValue()

フックの値を確認するよりも簡単な形式で開発ツールに情報を記録できます。

useDebugValue()を使用すると、フックに必要なコンテキストを追加できますカスタムフックが複雑になるにつれて、デバッグする必要がある場合は、こちらを使用します。

プライバシーポリシー