「TypeScriptとReact/Next.jsでつくる実践webアプリケーション開発」の学習記録と覚え書き。
先日同様React Hooksの続き。
ReactのフックでuseMemoから。
useMemo
useCalback同様に値を生成する関数と依存配列を受け取る。
コンポーネント描画時に前の依存配列と今の依存配列の値を比較する。同じだった場合はメモ化した値を返し、異なっていれば渡された関数を実行し結果を新しい値としてメモする。
useCallbackは返すのは関数そのもの、useMemoは関数の返す値、という感じ。改めてリファレンスなどを読んでもう少し理解は深めておきたい。
状態関数など含め、関数自体をメモ化するならuseCallback、コンポーネントの返値など関数が出す結果をメモ化するならuseMemo。
……というか実は昨日useMemoで詰まってできず後日（今日）にしたわけだけども。勘違いでちゃんとできていたようだ。
useEffect
副作用と呼ばれる「コンポーネントの描画とは直接関係ないんだけどやっておきたい処理」をより安全に運用するフック。
副作用含め、Reactの描画、ライフサイクルについてはこちらの記事がよさそうだった。
Reactの関数コンポーネントは各種処理を行いながら、その処理結果を反映させたUIを返す。変化の激しいもの（例としてはタイマーなど）を処理として直接記述すると描画しようとする、変化する、変化したのでまた描画しようとする……と無限ループなどが起こりかねない。これはそれを解決するフック。
関数と依存配列を受け取り、各種描画が全部終わった後に渡された関数を実行する。イメージとしては「重役出勤させる処理を渡すフック」。空の配列でもいいがそうすると初回レンダリング時にのみ処理が行われる。
また渡した関数の返り値だが関数にできる。返す関数をクリーンアップ関数と呼び、、これはuseEffectが行われているコンポーネントが画面から取り除かれる（アンマウントされる）時に実行されるもの。
useLayoutEffect
上記のuseEffectと似たフックだが、処理が行われるタイミングが違う。
useEffectは描画関数（zenn記事でいうところのレンダーか）が実行され、DOMが更新され、画面に描画された後。あとのあとのあと。
こちらは画面に描画される前が違う点。それとこちらは実行する処理は同期的に実行されるため、あまり重いものを渡すと画面出てこなくね？ってなるから注意らしい。
useEffect同様返り値には関数が指定できる。クリーンアップ関数だ。
だけども公式のリファレンス見てみたら「パフォーマンス低くなっかもしんねぇuseEffect使え」とか言われてた。
初回レンダリングとReact18
本書のコラムで興味深かったのが、React18での初回レンダリングの挙動。
<React.StrictMode>以下のコンポーネントでは、初回レンダリングでコンポ―ネントが2回描画されるらしい。道理でコンソールに「なんで2回レンダリングされてる表示されてんだ？」と思ったわけだ。
useEffectもuseLayoutEffectも、その性質上2回関数を実行し、1回クリーンアップ関数を実行することになる点は注意。
ただこれはReact.strictModeを取り除けば不活性化するし、本番環境でも関係はないらしい。
……でも開発環境だとバグ出てるけど「理論上平気！」って本番環境に反映はさせねぇだろうな……。
useContext
非常に苦手意識あるContextオブジェクトのフック。Consumerを介さず直接に値を取り出すフック。
逆を返せばcreateContextでのコンテキスト生成、コンテキストオブジェクトのProviderへの引き渡しはしなければならない。
あとcreateContext呼び出しの際にジェネリック型記述されてるんだけどこれどういうことなんだ。後で調べないと。フック関係の型付け分からん。useStateは分かるけども、これも結局は渡される値の型付けなのか？
useContext(Contextオブジェクト)で渡されている値が取り出せるので、それを変数に収納して直感的に使える。いちいちConsumerで囲まないといけなくなるのは楽だ。
あと素人だから分からないのはそもそもContextってどこで生成してどこで渡すのが正解なんだ？
生成したのをexportしていいのか？まぁ問題はないだろうけど…。そんでどこでimportするのがベターなのか。どこでも使うのはルートから、局所的に使うのは使いそうなとこからでいいのか？
本書ではあと2つの公式フックとカスタムフック実装を経てNext.jsに入っていく。JS、TS、React、Nextとひとしきり終われば次はコンポーネント開発のチャプターへ移る。早くいかねば。
また実際にサンプルコードを写していて思うのは「英単語分かんねぇ！」ってこと。自分は必然的に名付けに非常に制限がかかっている状態。
プログラミング必須英単語600+ | 学ぶ | プログラミング英語検定
これがよさそうなので読みたい。また名付けの語彙が低いのに加え、どう書くのかも全然わかってない。良書と呼ばれているリーダブルコードも買ってあるので読まねば。
