Radix-UI Dialogコンポーネントのマウント境界による状態管理の動作を実証するサンプルプロジェクト。
useStateをDialogContentの内側と外側どちらで宣言するかによって動作が変わることを比較するデモです。
npm install開発サーバーを起動：
npm run devブラウザで http://localhost:5173 にアクセスしてください。
Radix-UI DialogのDialogContentコンポーネントは、内部でPresenceコンポーネントを利用しています。
Presenceコンポーネントは、presentプロパティに応じてchildrenのレンダリングを制御します。
そのため、DialogContentのchildrenに渡されたコンポーネントはDialogがopen = trueになるまでマウントされず、open = falseになるとアンマウントされます。
パターン1では、DialogContentの外側でuseStateが宣言されているため、ダイアログを開閉しても状態は保持されます。
一方で、パターン2ではuseStateを宣言しているコンポーネントがDialogContentのchildrenに渡されているため、ダイアログが開くまで状態は初期化されず、また、ダイアログが閉じると状態は揮発します。
これはDialogにかぎらず、PopoverやContextMenuなど、Context - Trigger - Contentからなるコンポーネントすべてに共通する挙動です。