Retree vs MobX

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 }) {
    // Subscribe to this row's node — nothing else.
    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. No observer(),
// no action, no memoization pass.

import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class BoardStore {
    columns = [
        {
            title: "In progress",
            cards: [
                {
                    title: "Ship v1",
                    checklist: [
                        { text: "Write docs", done: false },
                        { text: "Cut release", done: false },
                    ],
                },
            ],
        },
        // ...more columns
    ];
    constructor() {
        makeAutoObservable(this);
    }
    toggle(item: { done: boolean }) {
        // Writes go through an action —
        // enforceActions is on by default.
        item.done = !item.done;
    }
}

const board = new BoardStore();

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

// Fine-grained tracking works here too — as long as
// every component reading the board is wrapped:
const ChecklistRow = observer(function ChecklistRow({
    item,
}: {
    item: ChecklistItem;
}) {
    return (
        <label>
            <input
                type="checkbox"
                checked={item.done}
                onChange={() => board.toggle(item)}
            />
            {item.text}
        </label>
    );
});
// Miss observer() on one child and that child
// silently stops updating.

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

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

function Counter() {
    const state = useNode(counter);
    return (
        <button onClick={() => (state.count += 1)}>
            Count: {state.count}
        </button>
    );
}

import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class CounterStore {
    count = 0;
    constructor() {
        makeAutoObservable(this);
    }
    increment() {
        this.count += 1;
    }
}

const counter = new CounterStore();

const Counter = observer(function Counter() {
    return (
        <button onClick={() => counter.increment()}>
            Count: {counter.count}
        </button>
    );
});