【レビュー】 React Hooks 入門: フックの基礎や使い所をしっかり理解して使いこなす

情報なし

本書は React（v16.13.1）の React Hooks の基礎について解説した本です。※日本語版ドキュメントでの呼び方に倣い、以降、本書では React Hooks を「フック」と表記します。フックの基礎や使い所を理解したうえで、フックを利用した React アプリケーションを実装できるようになることを目的にしています。本書で利用しているサンプルコードは、CodeSansbox 上で公開しています。本書で解説する組み込みのフックは次の通りです。- useState- useEffect- useRef- useCallback- useMemo- useReducer- useContextまた、一部のフックを利用するためには次のような React の仕組みや API を理解している必要があるため、それらも解説します。- React.memo- Context【どんな人が購入すると役に立つ？】- フックを利用した開発を行いたい方- フックについて短時間で概要を掴みたい方- React に組み込まれている様々なフックの使い方や使い所を理解したい方- React の公式ドキュメントのフックに関する項目を読んでみたが、理解できなかったり要点を掴めなかった方- 書籍のサンプルコード（https://github.com/hira777/react-hooks-beginners-book）の内容がわからない方【どんな人が購入しても役に立たない？】- 公式ドキュメントを読んで、フックの基礎や使い所を理解できている方- 書籍のサンプルコード（https://github.com/hira777/react-hooks-beginners-book）の内容がわかる方【前提】次に関して基本的な知識があることを前提としています。- HTML/CSS/JavaScript（ES6 以降）の基本的な知識がある- React の基本的な知識がある（JSX、関数コンポーネント、条件分岐によるレンダリング、繰り返しレンダーなど）これらについて自信が無い方は、他の書籍やインターネット上の文献で理解しておくことを推奨いたします。【目次】1. はじめに　1.1 本書について　1.2 対象読者　1.3 本書が想定している前提知識　1.4 動作環境　1.5 サンプルコード　1.6 免責事項2. フックの概要　2.1 フックとは　2.2 なぜフックを利用するのか　2.3 フックはただの関数3. useState　3.1 useState とは　3.2 useState の構文　3.3 useState の利用例　3.4 state は１つのオブジェクトでまとめて管理すべきか、個別に管理すべきか4. useEffect　4.1 useEffect とは　4.2 useEffect の構文　4.3 useEffect の利用例5. useRef　5.1 useRef とは　5.2 useRef の構文　5.3 useRef の利用例6. React.memo / useCallback / useMemo　6.1 React におけるパフォーマンス最適化　6.2 React.memo　6.3 useCallback　6.4 useMemo　6.5 useCallback を関数の再生成を防ぐ目的で利用してはいけないのか　6.6 React.memo / useCallback / useMemo の使い所7. useReducer　7.1 useReducer とは　7.2 useReducer の構文　7.3 useReducer の利用例　7.4 useReducer の使い所（useState との使い分け）8. Context / useContext　8.1 Context を理解する　8.2 useContext とは　8.3 useContext の構文　8.4 useContext の利用例　8.5 Context を利用時の注意点（Context の更新による不要な再レンダーを防ぐ）　8.6 Context の使い所9. カスタムフック　9.1 カスタムフックとは　9.2 カスタムフックの利用例　9.3 カスタムフックの使い所　9.4 様々なカスタムフックに触れる

　・React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜[2020-06-09に投稿]

　・React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする[2020-05-25に投稿]

　・Babel 7でTypeScriptをトランスパイルしつつ型チェックをする 〜webpack 4 + Babel 7 + TypeScript + TypeScript EsLint + Prettierの開発環境を構築する〜[2019-04-10に投稿]

　・Babel 7 の主な変更点まとめ[2018-12-26に投稿]

　・webpackのTree Shakingを理解して不要なコードがバンドルされるのを防ぐ[2018-07-04に投稿]

　・Redux 入門 〜Reduxの基礎を理解する〜[2018-05-11に投稿]

　・webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜[2018-03-16に投稿]

　・Prettier 入門 ～ESLintとの違いを理解して併用する～[2018-02-22に投稿]

　・Parcel 入門 ～Parcelはwebpackの代わりになるのか～[2017-12-10に投稿]

　・async/await 入門（JavaScript）[2017-08-03に投稿]

　・webpackのCommonsChunkPluginの使い方、使い所 （webpack 4で廃止）[2017-02-28に投稿]

　・Webhookとは？[2016-12-17に投稿]

　・ES2015(ES6) 入門[2016-12-15に投稿]

　・CSSアニメーション 入門[2016-08-19に投稿]

　・PATHを通すために環境変数の設定を理解する (Mac OS X)[2015-09-17に投稿]

　・PATHを通すとは？ (Mac OS X)[2015-09-16に投稿]