🐣 【日報】React実践の教科書 P187〜192
作成日: 2021/12/27
2

今日やったこと

  • 「モダンJavaScriptの基本から始める React実践の教科書」 P187〜192
    • ContextでのState管理
      • ContextのState更新と参照
      • 再レンダリングに注意

学習メモ

isAdminフラグをStateとしてContextに格納し、参照・更新ができるように修正
スクリーンショット 2021-12-27 22.48.40.png

Contextを使うとどういった時に再レンダリングが起きるか

  • 1つのContextオブジェクトの値が何か更新された時は、useContextでそのContextを参照しているコンポーネントはすべて再レンダリングされる

  • 以下の記述を例にすると、「あるコンポーネントではsetIsAdmin関数のみ使っている」場合でもisAdminが更新されたタイミングでこのコンポーネントも再レンダリングされてしまう。 そのため、1つのContextに属性の異なるいろんなStateを詰め込むのは避ける

// 管理者フラグ
const [isAdmin, setIsAdmin] = useState(false);
  • Providerはネストすることができるので、以下のように複数のProviderでコンポーネントを囲むのも手
return (
	<AdminFlagProvider>
		<OtherProvider>
			<App />
		</OtherProvider>
	</AdminFlagProvider>
);

所感

クリスマスだからということで
お酒を飲んだり温泉に浸かったりダラダラしていました。
勉強再開するまでの腰が重かったです🦥

前回使い方を学んだContextをおさらいしました。
次回はRedux, Recoil, Apollo Client というライブラリについて調べます。