senko

a global state for react but its actually easy and not overcomplicated to hell and back

install

npm i senko

the counter but senko

import React from "react";
import ReactDOM from "react-dom";

import senko from "senko";

// build a hook that allows component-level access to the state
const useSenko = senko({
    count: 0
});

function Counter() {
    // returns an observable that gives us a mutable state object
    const state = useSenko();

    return (
        <>
            <code>{state.count}</code>
            <button onClick={() => state.count++}>+</button>
            <button onClick={() => state.count--}>-</button>
        </>
    )
}

// render
ReactDOM.render(
    [<Counter />, <Counter />], // render two counters to flex the globalness
    document.querySelector("main")
);

arrays

although, technically, arrays are deeply nested objects, the data structure is common enough that we've exclusively added in support for them. everything works as expected with arrays (all the methods, immutable and mutable), except direct modification at an index:

senkoState.someArray[69] = 420; // this WONT work sorry
senkoState.someArray.setAt(69, 420); // scuffed alternative <3

caveat: property destructuring

this will NOT work. this essentially destroys the getter/setter magic that is used internally to making changing values reactive (see the vue 3 reactive function for example).

if it bothers you that much, don't use this. you always have useState for component-specific state, senko is only for cross-component data.

// BAD BAD BAD
const { a, b } = useSenko(); // a, b

// GOOD GOOD 
const state = useSenko(); // state.a, state.b

caveat: nested objects

theoretically, you could write something like this:

const useSenko = senko({
    nestedObject: {
        prop: 1,
    }
});

it logically follows that you could then write something like this:

// assume i'm in a react function component
const state = useSenko();

function doWork() {
    state.nestedObject.prop++;
}

that doesn't work. to keep senko simple, small, and performant, deeply nested objects are not reactive by nature. this, however, would work.

// assume i'm in a react function component
const state = useSenko();

function doWork() {
    state.nestedObject = {
        ... state.nestedObject,
        prop: state.nestedObject.prop + 1,
    };
}

generally, if you need multiple nested objects within the same senko state, you should just move them to individual senko states:

// BAD, not GOOD:
const useSenko = senko({
    auth: {
        token: "something_secret",
        username: "raghav-misra",
        /* ... */
    },
    profile: {
        darkTheme: true,
        avatarUrl: "https://epicgames.com/fortnite",
        /* ... */
    }
});

// GOOD GOOD GOOD:
const useAuthSenko = senko({
    token: "something_secret",
    username: "raghav-misra",
    /* ... */
});

const useProfileSenko = senko({
    darkTheme: true,
    avatarUrl: "https://epicgames.com/fortnite",
    /* ... */
});

go czech it out ;)