# Behavior traces — pmndrs/valtio

> Canonical page: https://codevetter.com/unpack/valtio/behavior-traces

# Behavior traces — pmndrs/valtio

Scanned commit 26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d (2026-10-01). Generated by codevetter codevetter 1.15.0 on 2026-10-02.

Source inspection; upstream code and tests were not executed.

These traces follow source execution order across library and application boundaries. Counter startup and mutation demonstrate proxy construction and React notification, while both todo examples show action-to-render paths. The photo booth provides a concrete persistence lifecycle, and the documentation route demonstrates build-time compilation followed by rendering. DevTools and watch illustrate bidirectional external messages and reactive-effect cleanup.
- Counter startup: main.tsx imports App → module evaluation calls proxy({number:0}), assigns nested ticks, and starts a 200 ms interval → createRoot renders StrictMode/App → Figure and Ticks call useSnapshot and read separate properties. — [examples/counter/src/main.tsx#L1-L11](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/counter/src/main.tsx#L1-L11) [examples/counter/src/App.tsx#L5-L26](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/counter/src/App.tsx#L5-L26) [examples/counter/src/App.tsx#L113-L120](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/counter/src/App.tsx#L113-L120) [src/vanilla.ts#L278-L299](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla.ts#L278-L299)
- Counter increment: ButtonUp's onClick increments state.number → the set trap installs the value and notifyUpdate advances its version → subscribe schedules a microtask → useSnapshot compares affected reads and returns the snapshot used by Figure. — [examples/counter/src/App.tsx#L17-L43](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/counter/src/App.tsx#L17-L43) [src/vanilla.ts#L137-L156](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla.ts#L137-L156) [src/vanilla.ts#L326-L340](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla.ts#L326-L340) [src/react.ts#L131-L174](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/react.ts#L131-L174)
- Array todo addition: AddTodoInput.handleSubmit calls actions.addTodo and clears its input → addTodo pushes a generated numeric id into store.todos → useTodos reads useSnapshot(store) and applies the active filter → TodoList maps results into TodoRow. — [examples/todo/src/App.tsx#L15-L48](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/todo/src/App.tsx#L15-L48) [examples/todo/src/store.ts#L17-L28](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/todo/src/store.ts#L17-L28) [examples/todo/src/store.ts#L43-L53](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/todo/src/store.ts#L43-L53)
- Map todo addition: form submission prevents default and rejects whitespace-only input → actions.addTodo calls store.todos.set with an id and completed:false → proxyMap.set writes a data slot and increments epoch → useTodos iterates snapshot values and TodoList renders TodoItem. — [examples/todo-with-proxyMap/src/AddTodoInput.tsx#L8-L13](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/todo-with-proxyMap/src/AddTodoInput.tsx#L8-L13) [examples/todo-with-proxyMap/src/store.ts#L24-L28](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/todo-with-proxyMap/src/store.ts#L24-L28) [src/vanilla/utils/proxyMap.ts#L108-L120](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla/utils/proxyMap.ts#L108-L120) [examples/todo-with-proxyMap/src/TodoList.tsx#L5-L25](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/todo-with-proxyMap/src/TodoList.tsx#L5-L25)
- Photo persistence: window load awaits loadImages then startMediaStream → capture draws video onto canvas and assigns a WebP data URL → acceptance calls saveImage and clears the candidate → the subscription snapshots images into localforage and redraws the gallery; later loadImages restores them. — [examples/photo-booth-vanillajs/src/main.js#L37-L56](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/photo-booth-vanillajs/src/main.js#L37-L56) [examples/photo-booth-vanillajs/src/main.js#L73-L76](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/photo-booth-vanillajs/src/main.js#L73-L76) [examples/photo-booth-vanillajs/src/main.js#L105-L109](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/photo-booth-vanillajs/src/main.js#L105-L109) [examples/photo-booth-vanillajs/src/main.js#L130-L164](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/examples/photo-booth-vanillajs/src/main.js#L130-L164)
- Documentation navigation: getStaticPaths calls getAllDocs/getSlugs with fallback:false → getStaticProps joins slug segments and calls getDocBySlug/getDocsNav → bundleMDX returns code/frontmatter → Doc renders DocLayout and MDXRenderer, which constructs the compiled component. — [website/pages/docs/[...slug].tsx#L6-L42](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/website/pages/docs/%5B...slug%5D.tsx#L6-L42) [website/lib/mdx.ts#L95-L127](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/website/lib/mdx.ts#L95-L127) [website/lib/mdx.ts#L169-L177](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/website/lib/mdx.ts#L169-L177) [website/components/MDXRenderer/MDXRenderer.tsx#L10-L17](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/website/components/MDXRenderer/MDXRenderer.tsx#L10-L17)
- DevTools lifecycle: devtools checks its enablement and extension → enables operations and connects → subscription sends snapshots for non-marker changes → ACTION JSON is assigned into live state, while jump messages set a time-travel flag → returned cleanup removes both subscriptions. — [src/vanilla/utils/devtools.ts#L41-L84](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla/utils/devtools.ts#L41-L84) [src/vanilla/utils/devtools.ts#L92-L113](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla/utils/devtools.ts#L92-L113) [src/vanilla/utils/devtools.ts#L142-L145](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla/utils/devtools.ts#L142-L145)
- watch lifecycle: watch creates cleanup/subscription sets and invokes revalidate → revalidate runs previous cleanups and calls callback(get) → get immediately subscribes newly used proxies → the parent context is restored before awaiting returned work → obsolete subscriptions are removed; cleanup stops further reevaluation. — [src/vanilla/utils/watch.ts#L48-L72](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla/utils/watch.ts#L48-L72) [src/vanilla/utils/watch.ts#L83-L125](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla/utils/watch.ts#L83-L125) [src/vanilla/utils/watch.ts#L127-L136](https://github.com/pmndrs/valtio/blob/26d8ca8cb6e5bb3b9516d429e50bc5aab1f42e0d/src/vanilla/utils/watch.ts#L127-L136)

Every claim links to its cited files at the pinned commit. Citations identify source evidence; they do not establish runtime correctness. Independent CodeVetter scan — not reviewed by upstream maintainers.

## Public product links

- [CodeVetter](https://codevetter.com/)
- [Download](https://codevetter.com/download)
- [Documentation](https://codevetter.com/docs/)
- [Source](https://github.com/Codevetter/codevetter)