# Think in Remix UI Instead of React
Used: remix@3.0.0
If you come to `remix/ui` from React, the first shift is that a component is not a function that runs again on every state change. In Remix UI, the component function runs once, sets up state and behavior, and returns a render closure that runs when you call `handle.update()`.
That changes how you build interactive UI. Instead of hooks, you keep local variables in setup scope, read props from `handle.props`, share state with `handle.context`, and choose when the UI should update.
Let's build a small photo gallery island that switches between grid and list views and shows the selected photo in a preview panel.
## Render the Gallery Island
The page only needs to pass serializable data into a client entry. The data is plain JSON, and the interactive behavior lives in the gallery component.
```tsx {% path="app/ui/home.tsx" %}
import { css } from "remix/ui";
import { GalleryDemo } from "../assets/gallery-demo";
let photos = [
{
id: 1,
title: "Quiet Morning",
location: "Kyoto",
src: "https://images.example.com/quiet-morning.jpg",
},
{
id: 2,
title: "After Rain",
location: "Porto",
src: "https://images.example.com/after-rain.jpg",
},
{
id: 3,
title: "Soft Light",
location: "Seoul",
src: "https://images.example.com/soft-light.jpg",
},
];
export function HomePage() {
return () => (
Remix UI Gallery
Pick a photo and switch layouts without moving state into hooks.
);
}
```
This file stays small. It renders the page shell and passes a `photos` array to the interactive island.
## Create the Render Closure
The gallery component is where the model becomes easier to see.
```tsx {% path="app/assets/gallery-demo.tsx" %}
import type { Handle } from "remix/ui";
import { clientEntry, css } from "remix/ui";
export interface Photo {
id: number;
title: string;
location: string;
src: string;
}
export interface GalleryDemoProps {
photos: Photo[];
}
export const GalleryDemo = clientEntry(
import.meta.url,
function GalleryDemo(handle: Handle) {
let selectedId = handle.props.photos[0]?.id ?? null;
return () => (
Selected photo: {selectedId ?? "none"}
);
},
);
```
`GalleryDemo` is a `clientEntry`, so it renders on the server and hydrates in the browser. The component function runs once, sets `selectedId`, and returns a render closure.
That render closure reads from `handle.props` and any setup-scope variables you keep around. If one of those variables changes, nothing happens until you call `handle.update()`.
## Update Local UI Explicitly
Add a view toggle next. This is where the React mental model usually gets in the way.
```tsx {% path="app/assets/gallery-demo.tsx" %}
import type { Handle } from "remix/ui";
import { clientEntry, css, on } from "remix/ui";
// ... previous code
export const GalleryDemo = clientEntry(
import.meta.url,
function GalleryDemo(handle: Handle) {
let view: "grid" | "list" = "grid";
let selectedId = handle.props.photos[0]?.id ?? null;
return () => (
Selected photo: {selectedId ?? "none"}
);
},
);
```
`view` is just a local variable. The click handler mutates it, then `handle.update()` reruns the render closure so the button label can reflect the new value.
That is the main habit to build in Remix UI. Mutate the setup state, then ask the component to render.
## Share State Through Context
The gallery needs more than one interactive child, so passing props through every layer gets noisy fast. Use `handle.context` to let child components read and change shared state.
```tsx {% path="app/assets/gallery-demo.tsx" %}
import type { Handle } from "remix/ui";
import { clientEntry, css, on } from "remix/ui";
export interface Photo {
id: number;
title: string;
location: string;
src: string;
}
export interface GalleryDemoProps {
photos: Photo[];
}
interface GalleryContextValue {
readonly view: "grid" | "list";
readonly selectedId: number | null;
select(id: number): void;
toggleView(): void;
}
export const GalleryDemo = clientEntry(
import.meta.url,
function GalleryDemo(handle: Handle) {
let view: "grid" | "list" = "grid";
let selectedId = handle.props.photos[0]?.id ?? null;
let gallery: GalleryContextValue = {
get view() {
return view;
},
get selectedId() {
return selectedId;
},
select(id) {
selectedId = id;
handle.context.set(gallery);
handle.update();
},
toggleView() {
view = view === "grid" ? "list" : "grid";
handle.context.set(gallery);
handle.update();
},
};
handle.context.set(gallery);
return () => (
);
}
```
Two details matter here.
Child components call `handle.context.get(GalleryDemo)`, not `get("gallery")` or some string key. Context is keyed by component identity, so the provider is the component itself.
Second, `handle.context.set()` only stores the value. It does not render anything again by itself, so `select()` and `toggleView()` both end with `handle.update()`.
## Read Shared State From Child Components
Add the list and preview panel now. These components read shared state from context and combine it with their own props.
```tsx {% path="app/assets/gallery-demo.tsx" %}
// ... previous code
interface PhotoListProps {
photos: Photo[];
}
function PhotoList(handle: Handle) {
let gallery = handle.context.get(GalleryDemo);
return () => (
{handle.props.photos.map((photo) => (
))}
);
}
interface PhotoCardProps {
photo: Photo;
}
function PhotoCard(handle: Handle) {
let gallery = handle.context.get(GalleryDemo);
return () => {
let isSelected = gallery.selectedId === handle.props.photo.id;
return (
);
};
}
interface SelectedPhotoProps {
photos: Photo[];
}
function SelectedPhoto(handle: Handle) {
let gallery = handle.context.get(GalleryDemo);
return () => {
let photo = handle.props.photos.find((photo) => photo.id === gallery.selectedId) ?? null;
if (!photo) return ;
return (
);
};
}
```
This is where `handle.props` becomes more useful than destructured values. `PhotoCard` reads the latest `handle.props.photo`, and `SelectedPhoto` combines current props with current context in the render closure.
In React, you usually think in terms of state setters and function bodies that run again. In Remix UI, you think in terms of setup state plus a render closure that reads the latest values when you ask it to.
## Hydrate the Client Entry
The component will not become interactive until you boot the browser runtime. Add a small entry file that hydrates every `clientEntry` on the page.
```ts {% path="app/assets/entry.ts" %}
import { run } from "remix/ui";
let app = run({
async loadModule(moduleUrl, exportName) {
let mod = await import(moduleUrl);
return mod[exportName];
},
});
await app.ready();
```
If your app already uses `run`, you only need to make sure this new component is exported through `clientEntry`. The server HTML still renders without JavaScript, and the island becomes interactive after hydration.
## Put the Full Example Together
Here is the complete gallery file in one place.
```tsx {% path="app/assets/gallery-demo.tsx" %}
import type { Handle } from "remix/ui";
import { clientEntry, css, on } from "remix/ui";
export interface Photo {
id: number;
title: string;
location: string;
src: string;
}
export interface GalleryDemoProps {
photos: Photo[];
}
interface GalleryContextValue {
readonly view: "grid" | "list";
readonly selectedId: number | null;
select(id: number): void;
toggleView(): void;
}
export const GalleryDemo = clientEntry(
import.meta.url,
function GalleryDemo(handle: Handle) {
let view: "grid" | "list" = "grid";
let selectedId = handle.props.photos[0]?.id ?? null;
let gallery: GalleryContextValue = {
get view() {
return view;
},
get selectedId() {
return selectedId;
},
select(id) {
selectedId = id;
handle.context.set(gallery);
handle.update();
},
toggleView() {
view = view === "grid" ? "list" : "grid";
handle.context.set(gallery);
handle.update();
},
};
handle.context.set(gallery);
return () => (