Model.Unit.tsx

A Unit file contains reusable renderers for one model item or one list/table representation. Common exports are cards, compact rows, avatars, gallery tiles, and column helpers.

Units are usually presentational. They may include thin UI actions such as edit buttons, but forms belong in Template files and larger interactions belong in Util or Store.

ModelProps And Light Models

Use ModelProps to type the model prop, href, className, and common interaction props. Unit components usually receive Light models because they are rendered repeatedly in lists.

Article.Unit.tsx

Unit Variants

A single Unit file can export several display shapes for the same model. Name them by usage: Card for normal cards, Mini for compact rows, Abstract for feed/list summaries, Gallery for image grids.

Units are server components by default, so avoid putting browser events such as onClick directly in the Unit. Move interactive behavior into a small Util component, such as Article.Util.Remove, and compose it from the Unit.

Article.Unit.tsx

Actions Inside Units

Units may show small UI actions such as remove, copy, or detail buttons. Keep the Unit thin: render a small Util component for the browser behavior, while forms and async workflows stay outside the Unit.

Article.Unit.tsx

Load.Units And Direct Rendering

Use Load.Units when a slice manages loading, pagination, refresh, and empty states. If the page already has an array, render Units directly with map, which is common in server-rendered pages.

Load.Units also hydrates slice state into the client store so generated pagination, query, sort, refresh, and insight helpers can keep working after the first render.

field	Description	Example
<model>List<Suffix>	The hydrated list rendered by Load.Units. This is the current visible list state.
<model>InitList<Suffix>	The first list snapshot from the server init object. It is useful for reset or comparison flows.
<model>InitAt<Suffix>	Timestamp for when the server initialized the list.
<model>ListLoading<Suffix>	Marks the list as ready after hydration.
<model>Insight<Suffix>	Insight data returned with the slice, such as count or summary values.
st.pageOf<Model><Suffix> / st.lastPageOf<Model><Suffix> / st.limitOf<Model><Suffix>	Pagination state hydrated from the init object.
st.queryArgsOf<Model><Suffix>	The current query arguments used to load the slice.
st.sortOf<Model><Suffix>	The current sort value used to load the slice.