How to use the @hookstate/core.createStateLink function in @hookstate/core

import React from 'react';
import { createStateLink, useStateLink, useStateLinkUnmounted } from '@hookstate/core';

const store = createStateLink([{ counter: 0 }, { counter: 0 }, { counter: 0 }]);

setInterval(() => useStateLinkUnmounted(store)
    .nested[0] // get to the state of the first array element
    .nested.counter // get to the state of the element's counter
    .set(p => p + 1) // increment the counter...
, 3000) // ...every 3 seconds

export const ExampleComponent = () => {
    const state = useStateLink(store);
    return <>
        <p>Current state: {JSON.stringify(state.value)}</p>
        {state.nested.map((elementState, elementIndex) =&gt;
            <p>
                <span><b>Counter #{elementIndex}: {elementState.value.counter}</b> </span>
                <button> elementState.nested.counter.set(p =&gt; p + 1)}&gt;Increment</button>
                {elementIndex === 0 &amp;&amp; ' watch +1 every 3 seconds '}</p>

import React from 'react';
import { createStateLink, useStateLink, useStateLinkUnmounted, StateLink } from '@hookstate/core';

interface Task { name: string; priority: number| undefined  }

const initialValue: Task[] = [{ name: 'First Task', priority: undefined }];
const stateInf = createStateLink(initialValue);

setTimeout(() => useStateLinkUnmounted(stateInf)
    .set(tasks => tasks.concat([{ name: 'Second task by timeout', priority: 1 }]))
, 5000) // adds new task 5 seconds after website load

export const ExampleComponent = () => {
    const state: StateLink = useStateLink(stateInf);
    return <>
        
        {state.nested.map((taskState: StateLink, taskIndex) =>
            
        )}
        <p><button> state.set(tasks =&gt; tasks.concat([{ name: 'Untitled', priority: undefined }]))}&gt;
            Add task
        </button></p>

import React from 'react';
import { createStateLink, useStateLink, useStateLinkUnmounted } from '@hookstate/core';

const store = createStateLink({ counter: 0 });

setInterval(() => useStateLinkUnmounted(store) // get to the state of the object
    .nested.counter // get to the state of the counter property
    .set(p => p + 1) // increment the counter...
, 3000) // ...every 3 seconds

export const ExampleComponent = () => {
    const state = useStateLink(store);
    return <>
        <p>Current state: {JSON.stringify(state.value)}</p>
        <p>
            <span><b>Counter value: {state.value.counter}</b> (watch +1 every 3 seconds) </span>
            <button> state.nested.counter.set(p =&gt; p + 1)}&gt;Increment</button>
        </p>
    
}

import React from 'react';
import { createStateLink, useStateLink, useStateLinkUnmounted, StateLink } from '@hookstate/core';

const store = createStateLink([0, 0, 0]);

setInterval(() => useStateLinkUnmounted(store).nested[0].set(p => p + 1), 3000)

export const ExampleComponent = () => {
    // type annotations are only to demonstrate how 'nested'
    // types are unfolded when the state tree is traversed
    const state: StateLink = useStateLink(store);
    return <>
        <p>Current state: {JSON.stringify(state.value)}</p>
        {state.nested.map((elementState: StateLink, elementIndex: number) =&gt;
            <p>
                <span><b>Counter #{elementIndex} value: {elementState.value} </b></span>
                <button> elementState.set(p =&gt; p + 1)}&gt;Increment</button>
                {elementIndex === 0 &amp;&amp; ' watch +1 every 3 seconds'}
            </p>
        )}

import React from 'react';
import { createStateLink, useStateLink, useStateLinkUnmounted, StateLink } from '@hookstate/core';

interface Task { name: string; priority?: number }

const initialValue: Task[] = [{ name: 'First Task' }];
const stateRef = createStateLink(initialValue);

setTimeout(() => useStateLinkUnmounted(stateRef)
    .set(tasks => tasks.concat([{ name: 'Second task by timeout', priority: 1 }]))
, 5000) // adds new task 5 seconds after website load

export const ExampleComponent = () => {
    const state: StateLink = useStateLink(stateRef);
    return <>
        
        {state.nested.map((taskState: StateLink, taskIndex) =>
            
        )}
        <p><button> state.set(tasks =&gt; tasks.concat([{ name: 'Untitled' }]))}&gt;
            Add task
        </button></p>

import React from 'react';
import { createStateLink, useStateLink, useStateLinkUnmounted } from '@hookstate/core';

const store = createStateLink(0);

useStateLinkUnmounted(store);

export const ExampleComponent = () => {
    const state = useStateLink(store);
    return <>{state.value}
}

import React from 'react';
import { createStateLink, useStateLink } from '@hookstate/core';

const stateRef = createStateLink({ priority: 0, task: 'Untitled Task' });

const TaskView = () => {
    const state = useStateLink(stateRef);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        <span>Task name: {state.value.task} </span>
        <input value="{state.value.task}"> state.nested.task.set(e.target.value)}/&gt;
    </p>
}

const PriorityView = () =&gt; {
    const state = useStateLink(stateRef);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        <span>Task priority: {state.value.priority} </span>
        <button> state.nested.priority.set(p =&gt; p + 1)}&gt;Increase priority</button></p>

import React from 'react';
import { createStateLink, useStateLink, StateLink } from '@hookstate/core';

const stateRef = createStateLink({ priority: 0, task: 'Untitled Task' });

const TaskView = (props: { state: StateLink }) => {
    const state = useStateLink(props.state);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        <span>Task name: {state.value} </span>
        <input value="{state.value}"> state.set(e.target.value)}/&gt;
    </p>
}

const PriorityView = (props: { state: StateLink }) =&gt; {
    const state = useStateLink(props.state);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        <span>Task priority: {state.value} </span>
        <button> state.set(p =&gt; p + 1)}&gt;Increase priority</button></p>

import React from 'react';
import { createStateLink, useStateLink, useStateLinkUnmounted } from '@hookstate/core';

const stateRef = createStateLink(0);

setInterval(() => useStateLinkUnmounted(stateRef).set(p => p + 1), 3000)

export const ExampleComponent = () => {
    const state = useStateLink(stateRef);
    return <p>
        <span><b>Counter value: {state.value}</b> (watch +1 every 3 seconds) </span>
        <button> state.set(p =&gt; p + 1)}&gt;Increment</button>
    </p>
}