React Data List

React Data List is a library which helps you build data arrays by expressing items declaratively using React components. It was built primarily for React Native, but should work anywhere.

Why?

For a full explanation around why this exists, please checkout the counterpart article here.

##

How does it look?

$3

``tsx
function ErrorOnRenderCheck() {
return (
onLayout={() => {
throw new Error("This never happens as we evaluate descriptors before first paint.")
}}
/>
)
}

renderer={
contentContainerStyle={contentContainerStyle}
ListHeaderComponent={
toggleThorinAndCompany={toggleThorinAndCompany}
jumbleFellowship={jumbleFellowship}
/>
}
/>
}
renderEmpty={() => (
/**
* This never happens as we're guaranteed rows will be
* evaluated to data items on first paint.
*/



)}
>
{/ Supports nested ReactDataList instances /}




{fellowship.map((character) => (
key={character.name}
name={character.name}
race={character.race}
url={character.url}
/>
))}

{isShowingThorinAndCompany && (
<>

}>



)}

`

https://github.com/user-attachments/assets/23c2d232-7f35-470e-98b4-156efaaf326a

$3

A lightweight wrapper around ReactDataList which provides a top-level React.Suspense and ErrorBoundary. This is useful for typical async work, where you may want to display skeleton rows (via renderPendingRows), a full-screen spinner (via renderPending), or perhaps a full-screen error message (via renderError).

`tsx
renderer={
contentContainerStyle={contentContainerStyle}
ListHeaderComponent={