# Vuer Component Life Cycle

## Core Concept

This tutorial demonstrates the basic **CRUD operations** for components in Vuer: adding a component, updating in-place, and removing.

## Life Cycle Operations

### 1. Adding Components
Create new components using `session.upsert`:

```python
session.upsert @ Obj(
    src="/static/model.obj",
    position=[0, 0, 0],
    key="my-model",
)
```

### 2. Updating Components
Modify existing components by reusing the same key:

```python
session.upsert @ Obj(
    src="/static/model.obj",
    position=[1, 0, 0],  # Changed position
    key="my-model",  # Same key updates the existing component
)
```

### 3. Removing Components
Delete components with `session.remove`:

```python
session.remove @ "my-model"
```

## Complete Example

```python
from vuer import Vuer
from vuer.schemas import Obj
import asyncio

app = Vuer()

@app.spawn
async def main(session):
    # Create/Update: Add a wireframe mesh
    for i in range(80):
        wireframe = i % 2 == 0

        # Toggle wireframe on and off
        session.upsert @ Obj(
            src="/static/model.obj",
            position=[0, 0, 0],
            wireframe=wireframe,
            key="primary-mesh",
        )

        await asyncio.sleep(0.01)

    # Add a second component
    session.upsert @ Obj(
        src="/static/model.obj",
        position=[1, 0, 0],
        wireframe=True,
        key="secondary-mesh",
    )

    await asyncio.sleep(0.8)

    # Remove the second component
    session.remove @ "secondary-mesh"

    # Keep the session alive
    while True:
        await asyncio.sleep(1.0)

app.run()
```

## Key Patterns

### Using Keys
- **Unique keys** identify components in the scene
- **Reusing a key** updates the existing component
- **Different keys** create new components

### Update Frequency
The example toggles wireframe every 0.01 seconds (100 times per second), demonstrating how Vuer handles rapid updates efficiently.

### Timing
Components can be added and removed at any time during the session, allowing for dynamic scene management.

## Visual Effect

This creates an animated effect showing two mesh versions (solid and wireframe) alternating visibility, demonstrating how components can be dynamically managed throughout an application's runtime.

## Source

Documentation: https://docs.vuer.ai/en/latest/tutorials/basics/simple_life_cycle.html