How to use @hookstate/core - 10 common examples

export const ExampleComponent = () => {
    const state = useStateLink(['First Task', 'Second Task'])
        .with(Initial); // enable the plugin
    return <>
         Initial(s).modified())}
        >{(modified: boolean) => {
            return <p>
                Last render at: {(new Date()).toISOString()} <br>
                Is whole current state modified (vs the initial): {modified.toString()} <br>
                The <b>initial</b> state: {JSON.stringify(Initial(state).get())}
            </p>
        }}
        
        {state.nested.map((taskState, taskIndex) =&gt;
            {scopedTaskState =&gt; {
                return <p></p>

function JsonDump(props: { state: StateLink }) {
    // optional scoped state for performance, could use props.state everywhere instead
    const state = useStateLink(props.state);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        Current state: {JSON.stringify(state.value)}
    </p>
}

function PerformanceMeter(props: { matrixState: StateLink }) {
    const stats = React.useRef({
        totalSum: 0,
        totalCalls: 0,
        startTime: (new Date()).getTime()
    })
    const elapsedMs = () => (new Date()).getTime() - stats.current.startTime;
    const elapsed = () => Math.floor(elapsedMs() / 1000);
    const rate = Math.floor(stats.current.totalCalls / elapsedMs() * 1000);
    const scopedState = useStateLink(props.matrixState)
        .with(() => ({
            id: PerformanceViewPluginID,
            instanceFactory: () => ({
                onPreset: (path, prevState, newCellValue) => {
                    if (path.length === 2) {
                        // new value can be only number in this example
                        // and path can contain only 2 elements: row and column indexes
                        stats.current.totalSum += newCellValue - prevState[path[0]][path[1]];
                    }
                },
                onSet: () => {
                    stats.current.totalCalls += 1;
                }
            })
        }))
    // mark the value of the whole matrix as 'used' by this component

function TaskEditor(props: { taskState: StateLink }) {
    // optional scoped state for performance, could use props.taskState everywhere instead
    const taskState = useStateLink(props.taskState);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        Task state: {JSON.stringify(taskState.get())}<br>
        <input value="{taskState.nested.name.get()}"> taskState.nested.name.set(e.target.value)}
        /&gt;
        <button> taskState.nested.priority.set(p =&gt; (p || 0) + 1)} &gt;
            Increase priority
        </button>
    </p>
}

function TaskEditor(props: { taskState: StateLink }) {
    // optional scoped state for performance, could use props.taskState everywhere instead
    const taskState = useStateLink(props.taskState);
    return <p>
        Last render at: {(new Date()).toISOString()} <br>
        Task state: {JSON.stringify(taskState.get())}<br>
        <input value="{taskState.nested.name.get()}"> taskState.nested.name.set(e.target.value)}
        /&gt;
        <button> taskState.nested.priority.set(p =&gt; (p || 0) + 1)} &gt;
            Increase priority
        </button>
    </p>
}

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>