Skip to content

examples: entity-todo README uses outdated reactivity pattern (let + effect) #3012

@viniciusdacal

Description

@viniciusdacal

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

  • No let + effect() derive-from-query pattern in `examples/entity-todo/README.md`
  • Reactive UI snippet matches the conventions in .claude/rules/ui-components.md
  • Snippet stays in sync with the actual implementation in `examples/entity-todo/src/pages/todo-list.tsx`

Found during review of #3005.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions