Every component has a *lifecycle* that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
Every component has a *lifecycle* that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](/tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM.
We'll add an `onMount` handler that loads some data over the network:
We'll add an `onMount` handler that loads some data over the network:
@ -25,4 +25,4 @@ We'll add an `onMount` handler that loads some data over the network:
Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance — not (say) in a `setTimeout`.
Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance — not (say) in a `setTimeout`.
If the `onMount` callback returns a function, that function will be called when the component is destroyed.
If the `onMount` callback returns a function, that function will be called when the component is destroyed.