Project: doctolib-oxygen · Branch: main · Mode: plan · Model: claude-sonnet-4-6
Stats: 1 user messages, 1 tool calls, tools used: Agent.
Conversation
Turn 1 — User
Check if the Modal component renders the children components inside the DOM when the modal is not open
Turn 1 — Assistant
Tools used:
Agent(inputs: description, subagent_type, prompt)
Tool results:
→ result (ok): Perfect! Now I have all the information I need. Let me create a comprehensive report:
Modal Component Analysis Report
File Location
Main Modal component: /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/Modal/Modal.tsx
1. How Modal Handles Rendering When isOpen is False
The Modal uses Material-UI's Modal component wrapped with a Portal-based approach and conditional mounting. Here's the rendering logic:
**The Modal passes the show prop d
…(truncated, 3015 more chars)
★ Insight ─────────────────────────────────────
The Modal uses a hybrid mounting strategy: children live in the DOM during transitions (to animate out smoothly), but are fully unmounted (return null) once the exit animation completes. This is a common pattern where keeping children mounted just long enough for the exit animation avoids a jarring "disappear immediately" effect while still freeing DOM resources after close.
─────────────────────────────────────────────────
Answer: No — children are NOT rendered in the DOM when the modal is closed.
The Modal uses conditional mounting logic:
// From the inlined react-overlays Modal
const mountModal = show || (Transition && !this.state.exited)
if (!mountModal) {
return null
}
Full lifecycle:
| State | Children in DOM? | How |
|---|---|---|
isOpen={true} |
Yes | Mounted, CSS opacity: 1 |
isOpen={false} (transition running) |
Yes (temporary) | CSS exit animation (~300ms) |
isOpen={false} (after transition) |
No | Returns null, fully unmounted |
So children are temporarily kept mounted only during the exit animation (for a smooth fade-out), then fully removed from the DOM. This means: - No hidden DOM bloat when modal is closed - Child components are destroyed and lose their state on close (re-initialized on next open) - Any expensive child component (e.g. a form, a video) will re-mount fresh each time the modal opens