Embed Lifecycle: Mount and Destroy

UPCS.mount returns a handle: { iframe, destroy() }. In a static page you can ignore it. In a single-page application, where components appear and disappear without a full page load, it is how you keep the embed tidy.

The handle

const handle = UPCS.mount('#upcs-map', { sessionToken: token, height: '500px' });

handle.iframe;     // the iframe element, useful for layout or testing
handle.destroy();  // remove the map

When to destroy

1. Route change. The user navigates away; the component that owns the map unmounts.
2. Remount. You need a new session after expiry; destroy the old map before mounting a new one.
3. Conditional UI. The map sits in a tab or modal that is hidden and later shown again.
4. Development reloads. Hot module reloading can mount a component twice.

Skipping destroy() can leave orphan iframes, duplicate callbacks, and in some cases two maps in the same container.

Pattern: one owner

Keep the handle in the same scope as the code that created it, and make creation idempotent:

let handle = null;

function showMap(token) {
  if (handle) handle.destroy();
  handle = UPCS.mount('#upcs-map', {
    sessionToken: token,
    onSelect,
    onError
  });
}

function hideMap() {
  if (handle) { handle.destroy(); handle = null; }
}

Frameworks

• React: call destroy() in the cleanup function of useEffect; see using the UPCS embed in React.
• Vue: call it in onBeforeUnmount; see using the embed in Vue.

Combine with session renewal

After session_expired, destroy, fetch a new token and mount again, as described in handle onError and session_expired. Keep any selection the user already made in your own state, not inside the map, so remounting loses nothing.

For the options accepted on mount, see UPCS.mount options explained.