Zustand × React Context を組み合わせたデザインパターン実践
はじめに Dress Code株式会社で直近HR Forceの開発をしている、ふるしょうです。 HR領域のSaaSは、複雑なフォームの機能要件が伴うことが少なくありません。 例えば、入社手続きにおける家族情報の登録など、動的フィールドの表示/非表示や編集制御、複雑な依存関係を持つ計算フィールド、再起的な階層構造、同一ページ内に複数の独立したフォームインスタンスが存在する場合の適切な状態管理が必要になります。 弊社では、このような複雑なフォーム要件に対応するため、Zustand と React Context を組み合わせたアーキテクチャパターンを採用し、開発を進めています。 本記事では、この組み合わせを前提に、DRESS CODEで取り入れているデザインパターンの具体例と設計内容について紹介します。 TL;DR Zustand + React Context パターンにより、コンポーネント
Introduction - Zustand
A small, fast, and scalable bearbones state management solution. Zustand has a comfy API based on hooks. It isn't boilerplatey or opinionated, but has enough convention to be explicit and flux-like. Don't disregard it because it's cute, it has claws! Lots of time was spent to deal with common pitfalls, like the dreaded zombie child problem, React concurrency, and context loss between mixed rendere
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
When using persist, it initializes with "null" data briefly before populating the localstorage data. · pmndrs/zustand · Discussion #2334
zustand persist in nextjs14 inital data is not taken from LocalStorage state · pmndrs/zustand · Discussion #2331
Wait for Nextjs rehydration before zustand store rehydration · Issue #938 · pmndrs/zustand
Zustand
Testing - Zustand
Persisting store data - Zustand
zustand/middleware persist option to set `initializeWithValue` · pmndrs/zustand · Discussion #1537
Nextjs with zustand, "Text content did not match. Server" error · pmndrs/zustand · Discussion #855
TypeScript Guide - Zustand
GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React
Global state management in app router : r/nextjs