Bootstrap 5 JavaScript API: Programmatic Control & Memory Management

While HTML data-bs-* attributes enable interactive components without writing a line of JavaScript, complex web applications (especially Single Page Applications built with React, Vue, or Vanilla JS) require Programmatic JavaScript Control. In this class, we explore the static methods, constructors, custom events, and memory disposal patterns in Bootstrap 5.

1. The getOrCreateInstance() Method (Best Practice)

In Bootstrap 5, you should avoid creating duplicate component instances on the same DOM element. Use getOrCreateInstance() to safely retrieve an existing instance or initialize a fresh one:

// Best Practice: Retrieve existing instance or create if absent
const modalEl = document.getElementById('myModal');
const modal = bootstrap.Modal.getOrCreateInstance(modalEl, {
  backdrop: 'static',
  keyboard: false
});

// Control via API
modal.show();
// modal.hide();
// modal.toggle();

2. Custom DOM Events & Preventing Actions

All Bootstrap 5 JavaScript plugins dispatch custom namespaced events (e.g. show.bs.modal, shown.bs.modal). You can intercept pre-action events using event.preventDefault() to cancel an action:

const confirmModal = document.getElementById('confirmModal');

// Intercept the hide event to verify unsaved user changes
confirmModal.addEventListener('hide.bs.modal', (event) => {
  if (hasUnsavedChanges()) {
    const confirmExit = confirm("You have unsaved changes. Discard and close?");
    if (!confirmExit) {
      // Cancels modal dismissal!
      event.preventDefault();
    }
  }
});

3. Single Page App Cleanup with dispose()

In modern frameworks (React, Vue, Svelte), component elements are mounted and unmounted dynamically. Failing to clean up Bootstrap instances leaves orphaned DOM event listeners, causing severe memory leaks:

// When unmounting a component or navigating between pages:
const popover = bootstrap.Popover.getInstance(myButtonEl);
if (popover) {
  // Destroys the instance, unbinds Popper.js, and removes event listeners
  popover.dispose();
}