# Hello World

This is our attempt to wow you, note that this is only a sample of all the different ways to work with ConanState

### Easy to create and render

[To create a Conan State](/data/conan-state/creating-state.md) you only need a name, and optionally, an initial state

```typescript
//name: counter, initialState: 0
const yetAnotherCounter$ = Conan.light('counter', 0)
```

Conan has [live rendering](/data/conan-state/subscribing-state/live-rendering.md), meaning, you can inline the state in your renderer.

```typescript
function render() {
    return yetAnotherCounter$.renderLive (
        (counterValue)=>(<h1>{counterValue}</h1>)
    )
}

```

### Easy to update

Every ConanState has two actions available immediately: 'update' and  'updateAsap'.

Let's add some buttons now tow change the state of the counter:

```typescript
function render() {
    return (<div>
        yetAnotherCounter$.renderLive (
            (counterValue)=>(<h1>{counterValue}</h1>)
        )
        <button onClick={()=>yetAnotherCounter$.do.update(3)}>
            setValueTo3
        </button>
        <button onClick={()=>yetAnotherCounter$.do.update(current=>++current)}>
            increase by one
        </button>
    </div>)
}

```

Note how we can use the update method to either provide a new value, or we can provide a reducer to provide a value that is based on its current value.

### Easy to do async updates

Quick fact, with ConanJs you won't need boilerplate code to deal with asynchronous code.&#x20;

![You are probably speechless now...](/files/-MBJtnjV_M2CG66AW10h)

Let's add two buttons to show async updates to the value.

```typescript
function render() {
    return (<div>
        yetAnotherCounter$.renderLive (
            (counterValue)=>(<h1>{counterValue}</h1>)
        )
        <button onClick={()=>yetAnotherCounter$.do.update(3)}>
            setValueTo3
        </button>
        <button onClick={()=>yetAnotherCounter$.do.update(current=>++current)}>
            increase by one
        </button>
        <button onClick={()=>yetAnotherCounter$.do.updateAsap(
            Asaps.delayed(3, 1000)
        )}>
            setValueTo3 - asnyc
        </button>
        <button onClick={()=>yetAnotherCounter$.do.updateAsap(
            Asaps.delayed(current=>++current, 1000)
        )}>
            increase by one - async
        </button>

    </div>)
}
```

### Easy to derive and compose state

Let's filter only even numbers, and double the current value of the state

```
<h1>
    EVEN NUMBERS: {yetAnotherCounter$.filter(it=>it % 2 === 0).connectLive (
        (counterValue)=>(<span>{counterValue}</span>)
    )}
</h1>
<h1>
    DOUBLE: {yetAnotherCounter$.map(it=>it * 2).connectLive (
        (counterValue)=>(<span>{counterValue}</span>)
    )}
</h1>
```

## Demo

{% embed url="<https://codesandbox.io/s/uzvvx>" %}

## �What's next?

In ['How to install/use ConanJs'](/how-to-install-use-conanjs.md) we will show you how to get this code running on your end.

{% hint style="info" %}
&#x20;Are you ready to dive in?&#x20;

Yes, show me more code!  <https://docs.conanjs.io/tutorials/todos-sync>

Yes, I prefer reading up! <https://docs.conanjs.io/conan-state>

Just let me know how to start using it! <https://docs.conanjs.io/how-to-install-use-conanjs>

NO! :(  Would you mind [reaching out to us](/about-us.md) to let us know how we can improve?
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.conanjs.io/tutorials/conan-state-demos/hello-wow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.