# Lifecycle

Source: https://signy.dev/documentation/1/components/lifecycle/

setup, mount and unmount.

## Order

1. `setup()` runs once, before rendering.
2. `render()` runs once and returns the DOM.
3. The `onMount` callbacks run once the DOM is in the page.
4. On unmount, the cleanup returned by `onMount` and the `onUnmount` callbacks run, then everything the component owns is disposed.

## onMount()

Register it in `setup()`. It may return a cleanup function, which runs on unmount.

```js
const { Component, Signal, application, html } = Signy;

class Clock extends Component {
  now = new Signal(new Date());

  setup() {
    this.onMount(() => {
      const timer = setInterval(() => (this.now.value = new Date()), 1000);
      return () => clearInterval(timer);
    });
  }

  render() {
    return html`<p>${() => this.now.value.toLocaleTimeString()}</p>`;
  }
}

application(Clock).mount("#lifecycle-clock");
```

## onUnmount()

```js
protected setup(): void {
  const socket = new WebSocket(url);
  this.onUnmount(() => socket.close());
}
```

## What you do not clean up

Bindings, effects created in `setup()`, control flow branches and child components are owned by the component and disposed for you. Only clean up what Signy cannot see, such as timers, sockets and listeners on `window`.