Zustand × React Context を組み合わせたデザインパターン実践

はじめに Dress Code株式会社で直近HR Forceの開発をしている、ふるしょうです。 HR領域のSaaSは、複雑なフォームの機能要件が伴うことが少なくありません。 例えば、入社手続きにおける家族情報の登録など、動的フィールドの表示/非表示や編集制御、複雑な依存関係を持つ計算フィールド、再起的な階層構造、同一ページ内に複数の独立したフォームインスタンスが存在する場合の適切な状態管理が必要になります。 弊社では、このような複雑なフォーム要件に対応するため、Zustand と React Context を組み合わせたアーキテクチャパターンを採用し、開発を進めています。 本記事では、この組み合わせを前提に、DRESS CODEで取り入れているデザインパターンの具体例と設計内容について紹介します。 TL;DR Zustand + React Context パターンにより、コンポーネント