はじめに

私はプログラミング歴5年程度のエンジニアです。
バックエンドの方が経験が多いのですが、フロントエンドもAnguraとVue.jsは業務経験がありました。
最近業務でReactを使うことになったので、業務開始までに公式ドキュメント（LEARN REACT）を熟読していました。
その効果は結構大きくて、比較的スムーズに業務に入れたと思っています。
ただ、1ヶ月ほど過ぎ、Learn Reactで学習していたけれど、忘れてしまっていることも多いと感じはじめました。
そこで、改めてLearn Reactを読み、「これ大事だな！」と思ったことをメモしていくことにしました。

メモスタート！

stateの原則

アプリケーションが必要とする状態に関する必要最小限をstateにして、それ以外は必要になった段階で計算する。propsや他のstateから計算できる値はstateにすべきではない。stateが多いと複雑になり、バグの原因になったりするので気をつける。

また、stateは可能な限りそれを必要とするコンポーネントで定義する。
stateが更新されるとstateを定義しているコンポーネントより下のコンポーネントは全てレンダーされるので、不要なレンダーがされないように必要な箇所でstateを定義する。
そのstateを複数コンポーネントで使う場合はリフトアップして、最も近い共通の親コンポーネントに定義して、propsで渡す。

リデューサー（Reducer）

stateの更新処理が複数ある場合はuseStateからuseReducerに変更すると処理がまとまって読みやすくなる。
例えば、配列をstateにする場合は、配列への追加、要素の更新、要素の削除など、stateの更新処理が複数あるので、useReducerを使うと便利かもしれない。
具体的な使い方はドキュメント参照。

useEffect内でのfetchには欠点あり

クライアントサイドのアプリではuseEffect内でfetchコールを書くことは一般的だが、以下のような欠点がある。

• レンダー後にフェッチするので効率的ではない（SSRやSSGの方が効率的）。
• エフェクトで直接データフェッチを行うと、「ネットワークのウォーターフォール（滝）」を作成しやすくなる。
  • 親コンポーネントと子コンポーネントでフェッチしていると、「親コンポーネントのレンダー -> フェッチ -> 子コンポーネントのレンダー -> フェッチ -> 孫コンポーネントのレンダー -> …」のように実行されるので、全てのデータを並行で取得するより遅くなる。
  • useEffect内でフェッチするのであれば、ネットワークのウォーターフォールにならないように、親コンポーネントのみでフェッチするなど意識して実装する必要がある。

useEffectはおそらく不要

useEffectは外部システムと同期するために使用する。
useEffectが他の state に基づいて state を調整しているだけの場合、おそらくそのuseEffectは必要ない。

key属性

• <></>と<Fragment></Fragment>は基本的に同一だが、key属性を渡す場合は<Fragment>を使う
• key={Math.random()} などとしてキーをその場で生成すると、キーがレンダーごとに一切合致しなくなり、コンポーネントと DOM が毎回再作成されるので、非推奨

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

植木 宥登

最新記事 by 植木 宥登 (全て見る)

• 学び直すReact（LEARN REACTを再読） - 2023年11月12日
• ドメインやURIの決め方 - 2023年7月6日
• DBダンプ取得（MySQL, PostgreSQL） - 2023年6月13日