めちゃくちゃ良かったです。
これからReact触ろう、という人は物量に日和ってしまうかもしれませんが
大体のことは書いてあります。値段は4400+税で約5000円で
ちょっとお高めではあるけど、内容的には納得のお値段
あくまで個人的にはReduxのことは紹介に留めて解説はRecoilに関してチャプターを
設けている点が良かったです。（Reduxは初めて触ったとき難しかった。。。）
個人的に役に立った点として
- Chapter7 フックの活用
- Chapter8 ルーティング
- Chapter11 NextJSの活用
辺りが網羅的に、かつ体系的にまとまっていて助かりました。
（完全な初学者だとReactJSとNextJSどっち？？みたいなのあるあるですよね）
あくまで個人的にはもう少しだけnextjsについての内容が欲しかったですが
それなら当然ですが(ReactJSではなく)Nextjsの文献・書籍を参考にしましょう。
Chapter11のprismaの導入で、npm install @prisma/clientが追加で必要です。
よく使われるライブラリの紹介もたくさんされていてmui, StoryBook, tailwindcss, Yup
辺り紹介されています。（フロントエンドメインじゃない自分にとっては割と知らないのもあった）
Chapter 7 自分用復習・メモ
ここから下は他人が読まない想定のメモです。雑です。自分がわかればいいやつ。
useEffectとuseLayoutEffect
useEffect(() => {statement}, deps)depsに与えられた変数が変更された時に処理する
depsを省略した場合と空の配列を渡した場合の違い
- 前者: 再描画時に常に実行
- 後者：初回のみ実行
あえて初回だけ起動にしたいケースを除いて(setIntarbalとかaddEventListenerとか以外)は
depsを省略しないようにするのが無難
useLayoutEffectはuseEffectと使い方は同じだが、レンダリングの前に同期的に実行される点が異なる
(useLayoutEffectでwaitすればページレンダリング自体がされない)
useRef
DOMにアクセスするためばかりに使ってたけど
つまるところ、参照を保持しておくもの。
渡した関数コンポーネント内の処理は描画の度に再実行されるのでローカル変数も再定義される。
そのため、useRefで参照を保持しておくことで、再描画時に参照を保持しておくことができる。
子でされる参照を親で使いたい場合など、関数コンポーネントにrefを直接渡すことはできない
（関数はインスタンスを持たないので）のでforwardRefを使う
（めちゃくちゃ端折るが）forwardRefで親に自由に触らせることが複雑すぎる場合
useImplementorというのを使うと良い
生成、破棄のタイミングで実行したいようなケースではコールバックRefという仕組みを使うことも検討する。
参考: Qiita callback refsでuseEffectを使うのを避ける
useReducer
※内部的には知らないが、使い方的にはReduxのものみたいなやつ
stateと処理を一緒に管理する。
useReducer(reducer, initialArg, init?)
reducer(state, action) => newState
initalArg : stateの初期値を渡す
init: 初期化関数を渡す(省略可)actionは好きな型でいいっぽい ( {type: string}がよくサンプルとして見かける)
useContextt
これは最近まぁまぁたくさん使ったので簡単に。
アプリ全体で参照したい値を保持するためのもの。
ただ、上位コンポーネントでのコンテキスト登録が前提になるので利用はしっかり検討する。
memo, useMemo, useCallback
キャッシュ機能関連
useMemo: 関数の結果をメモしておく。depsが変更された時に再計算される
memo: コンポーネントの結果をメモしておく。propsが変更された時に再計算される
useCallback: 関数をメモしておく。depsが変更された時に再計算される
この辺りざっくりしか使ってなかったので、しっかりやっていきたい。
ただ、この説明だけ見ると全部それで良くない？？
駄目な例を知りたい。と思ってchatgptに聞いたら下記とのこと。なるほど。
React の useMemo, memo, useCallback はパフォーマンス最適化のためのフック・HOC (Higher-Order Component) です。これらは不必要な再計算や再レンダリングを防ぐために役立ちますが、無闇に使うとパフォーマンスを逆に低下させることがあります。以下は、これらの関数を利用する際の注意点や困るケースです。
オーバーヘッド:
useMemoやuseCallbackを不必要に多くの関数や値に対して使うと、メモリや計算のオーバーヘッドが増えることがあります。特に、依存配列 (deps) に多くの要素がある場合、それらの要素の変更を監視するコストが上昇します。
コードの複雑性:
最適化のためにこれらのフックやHOCを多用すると、コードの可読性や保守性が低下する可能性があります。
不適切な依存配列:
useMemoやuseCallbackの依存配列を正確に指定しないと、予期しない動作やバグの原因となる可能性があります。
Premature optimization:
最初からこれらの最適化手法を多用することは、"premature optimization"（早すぎる最適化）の罠に陥る可能性があります。まずはシンプルに実装し、パフォーマンスのボトルネックが見つかった時点で適切に最適化を行う方が効果的です。
Static Values:
静的な値や関数（つまり、再レンダリング間で変わらないもの）にuseMemoやuseCallbackを使用するのは不適切です。これは無駄な最適化となります。
memoと子コンポーネントの再レンダリング:
memoを使用しても、親コンポーネントが再レンダリングされた場合、子コンポーネントのpropsが変更されていないかどうかのシャロー比較が行われます。これは、大きなデータ構造をpropsとして渡している場合、オーバーヘッドが増える可能性があります。
最適化の過信:
useMemoやuseCallbackを使用しても、他の要因（例えば、外部のAPI呼び出しや大量のDOM操作）によってアプリケーションのパフォーマンスが低下することがあります。
結論として、useMemo、memo、useCallbackは必要な場所で適切に使用することが重要です。不必要に使用すると、上記のような問題が生じる可能性があります。パフォーマンスの問題が生じた時に、プロファイリングツールなどを使ってボトルネックを特定し、その部分を最適化するアプローチがおすすめです。Reactに限らず、テストとYup, sentryらへん色々試す。