Description
examples/entity-todo/README.md (section "4. Reactive UI") shows code that uses the obsolete let + effect() pattern:
```tsx
const todosQuery = query(() => fetchTodos(), { key: 'todo-list' });
let isLoading = true;
let todoList: Todo[] = [];
effect(() => {
isLoading = todosQuery.loading.value;
todoList = todosQuery.data.value?.todos ?? [];
});
```
Per .claude/rules/ui-components.md:
let for local state — the compiler turns it into a signal.
const for derived values — the compiler wraps in computed().
watch() for side effects, not effect().
- Signal properties auto-unwrap inside JSX, so reading
.value for in-template usage is unnecessary.
The README example syncs derived values via let + effect(), which is exactly the antipattern the rule warns against.
Fix
Rewrite the example to use idiomatic Vertz:
```tsx
const tasks = query(() => fetchTodos(), { key: 'todo-list' });
return (
{tasks.loading &&
Loading…
}
{tasks.data?.todos.map((todo) => )}
);
\`\`\`
(Or whatever shape the query() result actually exposes — the README should mirror what the example app does in src/pages/todo-list.tsx.)
Acceptance Criteria
Found during review of #3005.
Description
examples/entity-todo/README.md(section "4. Reactive UI") shows code that uses the obsoletelet+effect()pattern:```tsx
const todosQuery = query(() => fetchTodos(), { key: 'todo-list' });
let isLoading = true;
let todoList: Todo[] = [];
effect(() => {
isLoading = todosQuery.loading.value;
todoList = todosQuery.data.value?.todos ?? [];
});
```
Per .claude/rules/ui-components.md:
letfor local state — the compiler turns it into a signal.constfor derived values — the compiler wraps incomputed().watch()for side effects, noteffect()..valuefor in-template usage is unnecessary.The README example syncs derived values via
let+effect(), which is exactly the antipattern the rule warns against.Fix
Rewrite the example to use idiomatic Vertz:
```tsx
const tasks = query(() => fetchTodos(), { key: 'todo-list' });
return (
(Or whatever shape the
query()result actually exposes — the README should mirror what the example app does insrc/pages/todo-list.tsx.)Acceptance Criteria
let+effect()derive-from-query pattern in `examples/entity-todo/README.md`Found during review of #3005.