The latest selected value.
useSelect narrows React updates to changes in the selected value or
ordered dependency list. Reactive entries in a dependency list are
subscribed to; primitive and plain entries are compared by identity. It is a
subscription primitive, not a memo cache: use memo / fnMemo for caching
computation and useSelect for reducing re-renders.
By default useSelect listens to nodeChanged, which is best when the
selector reads fields directly owned by the node. Pass
listenerType: "treeChanged" when the selector reads descendants that are
not included as reactive entries in a dependency list. Pass equals when
the selected value or tuple should be compared structurally.
Dependency-list subscriptions are observational: if a tuple entry changes,
useSelect may re-render this component, but it does not force the node
passed to useSelect to receive a fresh reproxy. Use @select on a
ReactiveNode getter when the owner node itself should emit nodeChanged.
You can also call useSelect(() => value) without a node. That form traps
reads automatically. Whole Retree-managed values are subscribed to broadly.
Property reads subscribe to the owner node but compare the specific property
value, so task.done can react to task replacement or done changes
without reacting to unrelated task fields. Primitive reads are kept as
comparison values.
Do not use useSelect to cache expensive computation for reuse elsewhere.
Put that work behind memo, @memo, or @fnMemo, then select the cached
value.
import { Retree } from "@retreejs/core";
import { useSelect } from "@retreejs/react";
const project = Retree.root({
tasks: [
{ title: "Docs", done: false },
{ title: "Tests", done: true },
],
});
function DoneCount() {
const doneCount = useSelect(
project.tasks,
(tasks) => tasks.filter((task) => task.done).length,
{ listenerType: "treeChanged" }
);
return <span>{doneCount}</span>;
}
project.tasks[0].done = true; // ✅ re-renders DoneCount
project.tasks[0].title = "Better docs"; // ❌ no re-render
Subscribe to a selected value from any Retree-managed node.