# Lifecycle

- Human documentation: [https://docs.univer.ai/guides/slides/getting-started/lifecycle](https://docs.univer.ai/guides/slides/getting-started/lifecycle)

- Agent Markdown: [https://docs.univer.ai/guides/slides/getting-started/lifecycle.md](https://docs.univer.ai/guides/slides/getting-started/lifecycle.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [slides/getting-started/lifecycle.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/getting-started/lifecycle.mdx)

---

When a Univer application is running, it goes through a series of ordered lifecycle stages. Understanding these lifecycles is crucial for developers, as it helps determine when it's safe to access business instances, DOM elements, or perform time-consuming asynchronous operations. Different stages are suitable for executing various types of initialization, rendering, and performance optimization tasks. By listening to lifecycle changes, developers can respond at the optimal time to system state changes, achieving functionality expansion, performance enhancement, or user experience optimization.

The lifecycle of Univer mainly includes the following four stages:

```mermaid
flowchart LR; A([Starting]) --> B([Ready]) --> C([Rendered]) -->D([Steady])
```

1. **Starting**: The system begins initialization, where plugins perform dependency injection and basic configuration.
2. **Ready**: The first business instance is created, and plugins perform core functionality initialization.
3. **Rendered**: The interface is rendered for the first time, allowing safe manipulation of the DOM or interface-related initialization.
4. **Steady**: The system enters a stable state, suitable for executing delayed loading, non-critical tasks, and other optimization operations.

Different types of plugins or components may have different startup timings in their lifecycle, but the overall process follows the order described above. Developers can use lifecycle events to precisely control the timing of functionality loading and execution.

> [!NOTE]
> To learn more about the lifecycle design of Univer and the specific startup timing of plugins, you can find relevant
> information in [《Univer Architecture#Plugin Lifecycle》](/blog/univer#plugin-lifecycle).

## Facade API

### Add Listeners

Univer provides a unified event subscription interface, allowing developers to listen for lifecycle changes through the Facade API:

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
  if (stage === univerAPI.Enum.LifecycleStages.Steady) {
    // Execute custom logic in the Steady stage
  }
})
```

### Remove Listeners

To remove a listener, you can use the returned `disposable` object:

```typescript
disposable.dispose()
```

### Lifecycle Events and Enums

Univer provides the following lifecycle events and enums for developers to use:

* Event Name: `univerAPI.Event.LifeCycleChanged`

* Lifecycle Stage Enums:
  * `univerAPI.Enum.LifecycleStages.Starting`
  * `univerAPI.Enum.LifecycleStages.Ready`
  * `univerAPI.Enum.LifecycleStages.Rendered`
  * `univerAPI.Enum.LifecycleStages.Steady`

### Example

> [!WARNING: Caution]
> `univerAPI.Event.LifeCycleChanged` only reflects lifecycle changes, so no events will be triggered during the
> `Starting` stage.

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
  switch (stage) {
    case univerAPI.Enum.LifecycleStages.Ready:
      console.log('The business instance has been created, you can perform core initialization')
      break
    case univerAPI.Enum.LifecycleStages.Rendered:
      console.log('The interface has been rendered, you can safely manipulate the DOM')
      break
    case univerAPI.Enum.LifecycleStages.Steady:
      console.log('The system is stable, you can perform delayed loading and other optimization operations')
      break
  }
})

// Remove the listener
disposable.dispose()
```