Zenn
Open47

React Learnを読む会（旧Next.js ドキュメントを読む会）

React
fumiyakifumiyaki

templateあまり使わないから見てなかったけどテンプレートが1回生成したら使い回すのに対してパスが変わる度にインスタンスが再生成されるLayoutなのね

fumiyakifumiyaki

app Routing Conventionsの量とpages Routing Conventionsの量を比べるとapp Routing Conventionsになってからめっちゃ予約されたキーワードが増えてるｗ
けど実用的なキーワードが多いから嬉しみを感じる

fumiyakifumiyaki

useSelectedLayoutSegments
これを使うとパンくずリストが簡単にできそう
（ただしレイアウトとかを綺麗に組んでいることが前提）

fumiyakifumiyaki

templateさんの特徴はここか

Features that rely on useEffect (e.g logging page views) and useState (e.g a per-page feedback form).

fumiyakifumiyaki

メモ
Linking and Navigationは一旦飛ばし（残り時間がない）
先にGroupRouteをやる
Intercepting Routesもやった

さわさわ

set関数の命名規則
setLastName(ln => ln.reverse());

さわさわ

上記非破壊的メソッド群はES2023なら使える(新jobs環境ではES2017なので使えない)

fumiyakifumiyaki

RefObjectで簡単に親から子へ渡せるようになったようだ

さわさわ

useRef: イベントハンドラから呼び出し。レンダーに関与しない情報をもたせる(変更をフックに再レンダーされない)
useEffect: 外部との接続(呼び出すための特定のイベントがない)

fumiyakifumiyaki

stateの連鎖の所で

場合によっては、イベントハンドラ内で次の state を直接計算することができないことがあります。例えば、複数のドロップダウンがあるフォームで、前のドロップダウンの選択値によって次のドロップダウンの選択肢が変わるところを想像してください。その場合は、ネットワークとの同期が発生しているので、エフェクトを連鎖させることは適切です。

とあってそういう場合はたしかに・・・となった

さわさわ

Reactコンポーネントと外部データをsyncさせたいときは useEffect より useSyncExternalStore のがベター

外部データはReactの世界とは関係なくいつでも変わる可能性があるのでコンポーネントの再レンダーが発生しないのでuseEffectの依存配列に含めることができない(Linterがチェックしてくれる)

fumiyakifumiyaki

依存配列を「選ぶ」ことはできません。依存配列には、エフェクトで読み取るすべてのリアクティブな値を含める必要があります。リンタがこれを強制します。これにより、無限ループや、エフェクトの再同期が頻発してしまうことがありますが、リンタを抑制してこれらの問題を解決としないでください！ 代わりに、以下のことを試してみてください。

エフェクトが 1 つの独立した同期の処理を表していることを確認してください。もし、エフェクトが何も同期していない場合、エフェクトは不要かもしれません。複数の独立したものを同期している場合は、分割してください。

props や state に反応せずに、最新の値を読み取り、エフェクトを再同期したい場合、エフェクトをリアクティブな部分（エフェクト内に残す）と、非リアクティブな部分（いわゆるエフェクトイベントに抽出する）に分割することができます。詳しくは、エフェクトからイベントを分離するを参照してください。

オブジェクトや関数を依存配列に含めないようにしてください。レンダー中に作成したオブジェクトや関数をエフェクトから読み取ると、これらの値は毎回異なるものになります。これにより、エフェクトが毎回再同期されてしまいます。詳しくは、エフェクトから不要な依存関係を削除するを参照してください。

はい

さわさわ

useEffentなどの依存配列にObjectをそのまま指定ではなくメソッドチェインにする方法がある
( [obj.prop1, obj.prop2, ....] )