osovv

Reactive Screen Model: Composing Dependent Behavior Models

A simplified micro-example demonstrating how to compose dependent behavior models for a screen.

What this shows

1. route.ts — creates a page model but stores zero screen logic
2. model.ts — assembles models; reusable factories (search, pagination) live in factories.ts, page-specific resource lives directly here
3. factories.ts — reusable model factories plus the router bridge:

• routerStateAtom syncs TanStack Router's internal store into Reatom

osovv

Reactive Screen Model: Composing Dependent Behavior Models

A simplified micro-example demonstrating how to compose dependent behavior models for a screen.

What this shows

1. route.tsx — creates a page model and renders the view; the view only touches atoms and knows nothing about hidden mechanics
2. model.ts — assembles models; reusable factories (search, pagination) live in factories.ts, page-specific resource lives directly here
3. factories.ts — reusable model factories plus the router bridge:

• routerStateAtom syncs TanStack Router's internal store into Reatom

osovv

Who You're Working With

Joel Hooks - co-founder of egghead.io, education at Vercel, builds badass courses via Skill Recordings (Total TypeScript, Pro Tailwind). Deep background in bootstrapping, systems thinking, and developer education. Lives in the Next.js/React ecosystem daily - RSC, server components, suspense, streaming, caching. Skip the tutorials.

<tool_preferences>

always use beads bd for planning and task management

Reach for tools in this order:

1. Read/Edit - direct file operations over bash cat/sed
2. ast-grep - structural code search over regex grep

osovv

LANG=C
LC_CTYPE="en_US.UTF-8"
LC_NUMERIC="en_US.UTF-8"
LC_TIME="en_US.UTF-8"
LC_COLLATE="en_US.UTF-8"
LC_MONETARY="en_US.UTF-8"
LC_MESSAGES="en_US.UTF-8"
LC_PAPER="en_US.UTF-8"
LC_NAME="en_US.UTF-8"
LC_ADDRESS="en_US.UTF-8"

osovv

-- 
-- PostgreSQL database dump 
-- 
-- Dumped from database version 13.4 
-- Dumped by pg_dump version 13.4 
SET statement_timeout = 0; 
SET lock_timeout = 0; 
SET idle_in_transaction_session_timeout = 0; 
SET client_encoding = 'UTF8'; 
SET standard_conforming_strings = on; 

osovv

DROP TABLE IF EXISTS factories;
DROP TABLE IF EXISTS factories;
DROP TABLE IF EXISTS technologies;
DROP TABLE IF EXISTS products;
DROP TABLE IF EXISTS vendors;
DROP TABLE IF EXISTS parts;


CREATE TABLE factories(
  id            BIGINT GENERATED ALWAYS AS IDENTITY,