liveBook · Manning

onMounted

As explained in Build a Frontend Web Framework (From Scratch)

A component lifecycle hook invoked after the component has been mounted into the browser DOM.

onMounted is a component lifecycle hook for running application code after a component has been mounted into the browser DOM. It gives developers a controlled point for customizing behavior once the component's view exists onscreen. section 13.1

A small framework implementation gives the hook three responsibilities:

  • Accept an optional onMounted function when defining a component, using an empty function when no hook is supplied. section 13.2
  • Run the hook with the component instance as this, so it can access component state and methods. section 13.2.2
  • Wrap hook execution in Promise.resolve so synchronous and asynchronous hooks share one scheduling interface. section 13.2.3
  • Queue the hook instead of awaiting it during mounting, preventing slow work such as data fetching from blocking later components and the first render. section 13.3

Fetching data after mounting

An asynchronous hook can fetch data after its component exists in the DOM and then update component state: async onMounted() { const data = await fetch('https://api.example.com/data'); this.updateState({ data }) }. The hook's this value is the component instance. section 13.2.2

The scheduler stores pending hooks in a jobs queue and processes them in order. The first queued job schedules processJobs with queueMicrotask; a flag prevents duplicate scheduling. The event loop runs these microtasks after synchronous mounting finishes, before the browser's next rendering opportunity. section 13.3.3 section 13.3.4

Table 13.1 The lifecycle of a component
Lifecycle event
Code
Explanation
Creation
new Component(…)
When the mountDOM() function is passed a component, it instantiates it.
Mounting
component.mount(…)
Then the mountDOM() function calls the component’s mount() method. This event is when the component is mounted into the DOM and its view first appears onscreen.
Updating
#patch() { … }
The component remains onscreen until it’s removed from the DOM, but it can render itself multiple times when the internal state changes or the external props change. This task is handled by the component’s private #patch() method.
Unmounting
component.unmount()
Finally, when the component is removed from the DOM, the destroyDOM() function calls the component’s unmount() method. This event is when the component is unmounted from the DOM and its view disappears from the screen.

Use the lifecycle table to distinguish creation, mounting, updating, and unmounting, and to locate when onMounted runs. section 13.1

How Build a Frontend Web Framework (From Scratch) covers it

How deep it goes
Implements configuration, instance binding, promise normalization, and microtask scheduling, stopping short of production-level completeness.
Examples
Uses a component hook that fetches data and updates state, plus ordered jobs processed through queueMicrotask.
What it assumes
Assumes JavaScript functions, promises, component mounting, and basic event-loop terminology while explaining scheduling behavior procedurally.
What you can do after
Build it from scratch by defining, binding, normalizing, queuing, and ordering mounted lifecycle callbacks.
How it connects
Connects component lifecycle, DOM mounting, component state, asynchronous functions, promises, the event loop, and microtask queues.
Cover of Build a Frontend Web Framework (From Scratch)
liveBookmanning.com
Read Build a Frontend Web Framework (From Scratch) on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build a Frontend Web Framework (From Scratch). The section links point to the parts of the book it draws on.