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?

Example 1 - Basic

functionErrorOnRenderCheck(){return(<ViewonLayout={()=>{thrownewError("This never happens as we evaluate descriptors before first paint.")}}/>)}<ReactDataListrenderer={<FlashListRenderercontentContainerStyle={contentContainerStyle}ListHeaderComponent={<HeadertoggleThorinAndCompany={toggleThorinAndCompany}jumbleFellowship={jumbleFellowship}/>}/>}renderEmpty={()=>(/** * This never happens as we're guaranteed rows will be * evaluated to data items on first paint. */<Viewstyle={styles.alert}><ErrorOnRenderCheck/></View>)}>{/* Supports nested ReactDataList instances */}<ListHeaderDataListRowtitle="Places in Middle Earth"/><MiddleEarthPlacesDataListRowplaceItems={MIDDLE_EARTH_PLACES}/><ListHeaderDataListRowtitle="The Fellowship"/>{fellowship.map((character)=>(<CharacterListItemDataListRowkey={character.name}name={character.name}race={character.race}url={character.url}/>))}{isShowingThorinAndCompany&&(<><ListHeaderDataListRowtitle="Thorin and Company"/><React.Suspensefallback={<LoadingListItemDataListRow/>}><MiddleEarthHobbitCompanyDataListRows/></React.Suspense></>)}</ReactDataList>

CleanShot.2025-09-03.at.20.12.39.mp4

Example 2 - Fetchable Template

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).

<ReactDataList.Fetchablerenderer={<FlashListRenderercontentContainerStyle={contentContainerStyle}ListHeaderComponent={<Headerreload={reload}/>}/>}renderPendingRows={<><ListHeaderDataListRowtitle="Thorin and Company"/><LoadingListItemDataListRow/><LoadingListItemDataListRow/><LoadingListItemDataListRow/><LoadingListItemDataListRow/><LoadingListItemDataListRow/><LoadingListItemDataListRow/></>}><ListHeaderDataListRowtitle="Thorin and Company"/><MiddleEarthHobbitCompanyDataListRowskey={reloadKey}/></ReactDataList.Fetchable>

CleanShot.2025-09-03.at.20.20.50.mp4

Release Process

This repo uses Changesets for versioning and GitHub Actions for automated publishing.

1. Create Changesets for Changes

# Generate a changeset for your changes
bunx changeset

• Select which packages are affected by your changes
• Choose the appropriate semantic version bump (patch, minor, major)
• Write a descriptive summary of the changes
• Commit the generated changeset file in .changeset/

2. Automated Version Management

When you push to the master branch, the GitHub Action will:

• Create a Release PR: If there are pending changesets, it creates a "Version Packages" PR with updated version numbers, CHANGELOGs, and consumed changeset files

3. Release Publication

When the "Version Packages" PR is merged:

• Automated Build: Builds only packages using bun run build-release
• Automated Publishing: Publishes updated packages to NPM via changeset publish
• Git Tagging: Creates appropriate git tags for the released versions

Manual Release (if needed)

# 1. Create changesets for changes
bunx changeset
# 2. Version packages (updates versions + CHANGELOGs)
bun run changeset-version
# 3. Build and publish
bun run changeset-publish