Valtio vs Retree

import { Retree } from "@retreejs/core";
import { useNode } from "@retreejs/react";

const board = Retree.root({
    columns: [
        {
            title: "In progress",
            cards: [
                {
                    title: "Ship v1",
                    checklist: [
                        { text: "Write docs", done: false },
                        { text: "Cut release", done: false },
                    ],
                },
            ],
        },
        // ...more columns
    ],
});

type ChecklistItem = { text: string; done: boolean };

function ChecklistRow({ item }: { item: ChecklistItem }) {
    // One object: read it, write it, subscribe to it.
    const row = useNode(item);
    return (
        <label>
            <input
                type="checkbox"
                checked={row.done}
                onChange={() => (row.done = !row.done)}
            />
            {row.text}
        </label>
    );
}

// Three levels deep, plain assignment, from anywhere:
board.columns[2].cards[0].checklist[1].done = true;
// Exactly one ChecklistRow re-renders.

import { proxy, useSnapshot } from "valtio";

const board = proxy({
    columns: [
        {
            title: "In progress",
            cards: [
                {
                    title: "Ship v1",
                    checklist: [
                        { text: "Write docs", done: false },
                        { text: "Cut release", done: false },
                    ],
                },
            ],
        },
        // ...more columns
    ],
});

type ChecklistItem = { text: string; done: boolean };

function ChecklistRow({ item }: { item: ChecklistItem }) {
    // Two objects per row: read the frozen snap,
    // write the mutable proxy.
    const snap = useSnapshot(item);
    return (
        <label>
            <input
                type="checkbox"
                checked={snap.done}
                onChange={() => (item.done = !item.done)}
            />
            {snap.text}
        </label>
    );
}

board.columns[2].cards[0].checklist[1].done = true;
// Access tracking keeps this narrow too — the cost is
// the state/snap split in every component, and memo'd
// children handed un-accessed snapshots can over-render.

import { Retree } from "@retreejs/core";
import { useNode } from "@retreejs/react";

const counter = Retree.root({ count: 0 });

function Counter() {
    // One object: read and write the same reference.
    const state = useNode(counter);
    return (
        <button onClick={() => (state.count += 1)}>
            Count: {state.count}
        </button>
    );
}

import { proxy, useSnapshot } from "valtio";

const state = proxy({ count: 0 });

function Counter() {
    // Two objects: read from the frozen snap,
    // write to the mutable state proxy.
    const snap = useSnapshot(state);
    return (
        <button onClick={() => (state.count += 1)}>
            Count: {snap.count}
        </button>
    );
}