Extensions

Press shift + S to search API reference.

React hook

useRecordById

View source

A hook for working with a single record. Automatically handles loading data and updating your component when the record's cell values or color changes.

Often used with useRecordIds to render a list of records where each list item only updates when the specific record it concerns changes.

Under the hood, this hook creates a TableOrViewQueryResult if passed a table or view. Pass a query result if you want direct access to it (e.g. for queryResult.getRecordById).

Returns the specified record, or null if no model was passed in, or no record with that ID exists in the model.

import {useRecordById, useRecordIds, useBase} from '@airtable/blocks/ui';
// this component concerns a single record - it only updates when that specific record updates
function RecordListItem({table, recordId}) {
const record = useRecordById(table, recordId);
return <li>{record.name}</li>;
}
// this component renders a list of records, but doesn't update when their cell values change -
// that's left up to RecordListItem
function RecordList() {
const base = useBase();
const table = base.tables[0];
// grab all the record ids from the table
const recordIds = useRecordIds(table);
// render a list of records:
return (
<ul>
{recordIds.map(recordId => {
return <RecordListItem key={recordId} recordId={recordId} table={table} />
})}
</ul>
);
}

Function signatures

function (tableOrView: Table | View, recordId: RecordId, opts?: SingleRecordQueryResultOpts) => Record | null
recordId

The ID of the record you want.

function (queryResult: AnyQueryResult, recordId: RecordId) => Record | null
recordId

The ID of the record you want.