【Hack a Week(1/2)】Reactドキュメントを読む
概要
先週は、Reactのドキュメントをガッツリ読む活動をしていました。
私は、仕事でReactを触っています。理解が曖昧だったり、普段使わないので知らない機能などがあるだろうな、Reactに詳しくなるために通しで読んだほうが良いなと考えてドキュメントを通しで読む活動をしてみました。
目次
Reactドキュメントの全体像
目次から数えると、Reactのドキュメントは、(実験的な機能、Cannyな機能の除いて)
- 機能の説明
- hook: 15件
- component: 9件
- API:11件
- クライアントAPI:2件
- サーバーAPI:6件
- Reactのルールについて
- 4件
という構成になっています。
- 4件
今週はhookを中心に読みました
ブログ記事一本にまとめるには分量が多いので学びが合ったところだけ
useReducerについて
Reduxパターンの実装などで頻繁に目にしていたuseReducerですが、あまりちゃんとどういうものか理解できていませんでした。
要するに、reducer関数内に書いたロジックを使って更新を行うstate変数を定義するもののようです。ですので、ドキュメントではstateフックの仲間として、useStateといっしょに紹介をされています。
ただ、最近はuseReducerを使う機会があまりなく、useStateでシンプルにかけるのなら、useReducerは使う出番なさそうだなという気持ちになりました。
個人開発で、複雑な状態管理をしたい場合には出番がありそうですが、useReducerを使うより先に、useStateでシンプルに書けないかどうか考えたうえで使うか判断をしたほうが良さそうだなと思いました。
useCallbackについて
useCallback、ふわっと関数を保持してくれるフックっぽいよなと曖昧な理解をしていたので、ここも読みました。useCallbackは、再レンダー間で関数定義をキャッシュできるようにするReactフックのようです。
dependenciesが変更されない限り、初回レンダー時と同じ関数を返してくれます。
こいつは、関数を返してくれるだけなので、実行タイミングは自由なタイミングにすることができます。
また、useCallbackはパフォーマンスの最適化としてのみ用いるべきと書いてあります。ドキュメントには、パフォーマンス最適化が必要なぐらい遅いReactのサンプルと、useCallbackを使ってどんな風に改善できるかのサンプルもありました。
useDebugValueについて
stateの中身を見るときにいつもconsole.logを使っていたのですが、もしかしたらそれよりも便利かも?useDebugValueはReact DevToolsでカスタムフックにラベルを追加できるようになるhooksです。
いつもconsole.logをよしなに埋め込んでいるのですが、React DevToolsもしっかり使えこなせるようになるといいのかも
useDeferredValueについて
これは初めて知った。
UIの一部の更新を遅延させるためのReactフックです。情報が取得されるまで、古い情報を表示し続け、情報の更新が来た際に新しい情報に書き換えるといった処理をしたい場合に活用できるhooksみたいです。
useIdについて
これも初めて知りました。
アクセシビリティ属性にわたすことができる一意のIDを生成するためのreact hookです。ただし、mapのkeyにわたすのは推奨されていなさそうなので注意
useImperativeHandleについて
こちらは、refとして公開されるハンドルをカスタマイズするためのReactフックです。
通常、コンポーネントは親に対してDOMノードを公開していませんが、forwardRefを使ってアクセス可能にすることができます。forwardRefを使ってrefを公開することができすのですが、その際にカスタムしたrefを公開することができます。カスタムしたrefを公開するときに使うのが、このuseImperativeHandleになります。
ただ、refを使うのは、propsで表現できない表現をする際に使うので、このhooksも使う機会が少なそう
ここに取り上げた以外にも、読んでみて初めてしったhooksがありましたが、分量が多くなってしまいそうなのでまた次回にでも。
【Hack a Week(1/2)】Reactドキュメントを読む