Class StateContainer<Value, RefVal>Abstract

Convenient container class to hold a reference object and value to allow for easy (but manual) state management. Just implement the update function by taking advantage of the ref object.

Example

Tic-tac-toe example

let currentPlayer: "x" | "o" = "x"

class SquareState extends StateContainer<"" | "x" | "o", HTMLDivElement | null> {
    constructor() {
        super("")
    }

    public updateDOM(squareRef: Ref<HTMLDivElement>) {
        squareRef.current.innerText = this.value
    }
}

...
const square = new SquareState()

createElement(
    "div",
    {
        class: "col-4",
        onClick: () => {
            // Check if square isn't already clicked
            if (square.value === "") {
                // Setter sets the value and then invokes `updateDOM`
                square.value = currentPlayer
                // Alternatively, `square.update(currentPlayer)` may be easier to understand
            }

            // Change current player
            currentPlayer = currentPlayer === "x" ? "o" : "x"
        },
    },
    createElement(
        "div",
        // We can attach the ref and value to some element
        {class: "tictactoe-square", ref: square.ref},
        square.value,
    ),
)
...
Copy

Remark

this pattern will get very messy if things are too complicated.