React 公式 DocsやReactの考え方・設計思想などについて📝

React 公式 Docsについて📝

React の流儀

https://ja.react.dev/learn/thinking-in-react

組み込みのReact Hook

https://ja.react.dev/reference/react/hooks

組み込みの React コンポーネント

https://ja.react.dev/reference/react/components

React の組み込み API

https://ja.react.dev/reference/react/apis

サーバコンポーネント

https://ja.react.dev/reference/rsc/server-components

ディレクティブ

https://ja.react.dev/reference/rsc/directives

state の管理 について

https://ja.react.dev/learn/managing-state

そのエフェクトは不要かも

https://ja.react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state

カスタムフックでロジックを再利用する

https://ja.react.dev/learn/reusing-logic-with-custom-hooks#should-all-functions-called-during-rendering-start-with-the-use-prefix

時間経過と state

https://ja.react.dev/learn/state-as-a-snapshot#state-over-time

レンダーは時間を切り取ってスナップショットを取る

https://ja.react.dev/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time

Reactの「フェッチウォーターフォール」について

https://ichizoku.io/fetch-waterfall-in-react/

useEffectについて📝

• レンダー中に計算できるものであれば、エフェクトは必要ない。
• 重たい計算をキャッシュするには、useEffect の代わりに useMemo を追加する。
• コンポーネントツリー全体の state をリセットするには、異なる key を渡す。
• prop の変更に応じて一部の state をリセットする場合、レンダー中に行う。
• コンポーネントが表示されたために実行されるコードはエフェクトに、それ以外はイベントハンドラに入れる。
• 複数のコンポーネントの state を更新する必要がある場合、単一のイベントで行うことが望ましい。
• 異なるコンポーネントの state 変数を同期しようと思った際は、常に state のリフトアップを検討する。
• エフェクトでのデータフェッチは可能だが、競合状態を回避するためにクリーンアップを実装する必要がある。

まとめ

https://ja.react.dev/learn/you-might-not-need-an-effect#recap

そのエフェクトは不要かも

https://ja.react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state