本記事のナラティブ
UdemyのReactの教材を進めていく過程で、React Routerのセクションまで行き着いた。
正直、これまで、useState, useEffect, useCallback...と第1弾で観てきて、
第1段React入門編で出てこなかった訳だから、第2弾で出てきた時点で（しかもセクションとしては50分と長尺）かなり身構えるものがある。しかも、タイトルにuseXxxというメソッド名すら登場せず、抽象的だ。
何といっても底知れぬ深みがある。
こういう場合、
①とにかく分からないまま受講してハンズオンで進めてしまう
②事前に資料を当たってみて予習する
という2つの選択肢が自分にはある。
①は、まあ大体、他のUdemy教材を受けたりして、また遭遇して出てきた時に、
「前、よく分からなかったけど、なんかやったな！」
という謎の手応えと感触を元に、再履修する形で、重ね塗りして、運が良ければ分かった気になれる。
或いは、兎に角進めてアウトプットする過程で、必要に迫られて細かく見直したり調べ直す過程で、身に付いていく。
巷では、これを『遅延評価型学習』と言ったりするようだ。。。
後で回収することに望みをかけて伏線を張ると言った感じだろうか・・・・
先によく分からないなりに経験してしまい、知識に結び付けていく、ということになる。
将来的に、知識に結び付ける自分に託しているとも言える。
②については、Udemy教材によっては、PDFをダウンロードできる形で、講義前のレクチャーを1つ分使って、講義資料を配布してくれることがあり、それにざっと目を通しておいて、分からないところを講義を受ける前に調べて、理解自体は済ませておくことが出来る。
資料があれば、少なくとも概観する位は出来るはずだ・・・
Springの次の超優良教材がまさにこれで、
講義を受ける前に細々と、この事前準備という一般的に予習と言われるステップを踏んで臨んだが、週末合間合間にやっていると、1,2ヵ月は掛かった。
現在この教材の受講自体は終わっていて、その間他のこともやっていたので、全部で6か月位掛かっている。
講義資料に基づく下調べの予習で分かっていたと思っていたのに、いざハンズオンでコーディングするとなると、JDBCのJOIN結合を扱うところでもっと細かく知る必要があることが分かり、更に引っ掛かり、これについてだけでも1か月位掛かった。
学習カリキュラムに則り、冒頭の本教材を早々に終わらせて、アウトプットに進むことにはなっているのだけど、①のアプローチについて今回怖いと感じた。
分かっていないのに、TODOリストではDONEが付くからだ。
本教材については、講義資料の配布自体は無い。
しかし、下準備は疎かには出来ない・・・
ならばということで、AIと対話形式で、React Routerに関する学習を行うことにした。
本記事ではuseNavigate()をテーマにしているが、それこそ、次に示すWebサイトのフックになっていて、React Router学習の本題としては、今回学習に際してアウトプットされた内容をGitHub Pagesにより展開したWebサイト『React Router 予習ノート』にあることをお伝えしておきたい。
（尚、この段階で未だ講義自体は受けていない。）
その一部トピックであるQ6の①「useNavigate() は描画のたびに新しい関数を作るのでは？」についてご紹介する形を取りたい。
useNavigate()は描画の度に同じ関数を生成する
const [searchParams, setSearchParams] = useSearchParams();
const location = useLocation();
const message = location.state?.message;
const navigate = useNavigate();
// マウント時に一度だけ state からメッセージを取り出し、自分で保持する
const [message] = useState(location.state?.message);
// 描画が終わった後で、履歴エントリの state だけを空にする
useEffect(() => {
if (location.state?.message) {
navigate("/employees", { replace: true, state: null });
}
}, [location, navigate]);
このソースコードは、locationすなわちここで文脈的には、ターゲットはlocation.stateのことで、
マウント時とlocation.stateが変わる度に実行される関数を表している。
用語として、描画サイクル（レンダリング）のフェーズを簡易的に次のように捉えている。
| 説明 | 用語 |
|---|---|
| 関数コンポーネントを実行して「画面に何を出すか」を計算する | レンダー |
| 計算結果を実際の画面（DOM）に反映する | コミット |
| useEffect の中身を実行する（条件を満たすものだけ） | エフェクト |
初回のレンダリングをマウントと呼ばれるものと認識している。
何がしたいかと言うと、次のようなものだ。
①従業員を登録した
②一覧画面に戻ってくる
③「登録しました」のメッセージを出す
④リロードすると「登録しました」のメッセージが消えるようにしたい
ここでuseEffectを使用していて、依存配列にlocationとnavigateを入れている。
locationは分かる。
navigateはなぜ入っているんだろう？
1つの答えとして、ESLint対策だ。
しかし、実質的な役割は無い。
無いと言っても、再レンダリングに関わるわけだから、関数が再実行された場合、
const navigate = useNavigate();
が再度処理されるはずだ。
"あれ？navigateって毎回新しくなるんじゃないの？"
"こういう話の為にuseCallbackがあったではないか！！！"
そう思ったのですが、
確かに、この変数自体は作り直されるものの、なんとReactがSpringのシングルトンBeanのように保管してくれているuseNavigate()の関数オブジェクトを返してくれると言うのです！！
これは、React RouterがuseCallbackを内部的に行ってくれているからという簡便な説明が通る様子・・・
終わりに
React Routerと言えば、記事にするテーマとしてもっと根幹なテーマがあったはずだ！！
しかし、これに関しては、テーマがかなり広く、構成要素も多様で、包括的な説明が必要になると判断しています。
それは、Webサイトにする程にまとまっていることからしてその分量については推して量られたい！・・・
そこで、運用の場面でボトルネックとなるであろう、局所的なハードルについて取り上げさせていただきましたー！！