Extensions

Press shift + S to search API reference.

React hook

useRecordIds

View source

A hook for working with a set of record IDs from a table, view or query result. Automatically handles loading data and updating your component when the underlying data changes.

This hook doesn't re-render when the data inside the records changes - only when records are added, removed, or re-ordered. Use this over useRecords when you want to avoid watching cell data for all records. Use with useRecordById to only watch cell data for certain records.

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 an array of record IDs, or null if no model was passed in.

import {useRecordIds, useBase} from '@airtable/blocks/ui';
function RecordCount() {
const base = useBase();
const table = base.tables[0];
// grab all the record ids from that table
const recordIds = useRecordIds(table);
// return the count
return <span>record count in {table.name}: {recordIds.length}</span>;
}

Function signatures

function (tableOrView: Table | View, opts?: RecordIdQueryResultOpts) => Array<RecordId>
function (queryResult: AnyQueryResult) => Array<RecordId>
function (tableOrViewOrQueryResult: null) => null
tableOrViewOrQueryResult

The Table, View or RecordQueryResult you want the record ids from.