今日やったこと

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

学習メモ

isAdminフラグをStateとしてContextに格納し、参照・更新ができるように修正

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 というライブラリについて調べます。