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