React Modal Dialog Pattern

Core Rule

Split every modal-like component into two layers:

1. Container: owns the architectural boundary and open/close wiring.
2. Content: owns the interactive body and all hooks/state that should exist only while the UI is open.

This applies beyond dialogs. Use the same split for drawer, sheet, popover, option panel, dropdown menu, command menu, and any collapsible/overlay primitive whose content can hold form state, selected options, watchers, subscriptions, or effects.

Layer 1: Container

The container is the architecture-facing component. It should be boring.