Airtable custom block app keeps restarting when using multiple useRecords for different tables

Other Questions Airtable
1

I built a custom Airtable block that pulls data from several tables and shows them together. I need to use useRecords hooks so the app updates when users make changes to the data.

The problem is my app keeps restarting every time it hits a new useRecords call. This makes everything super slow. How can I fix this while still keeping all my table data up to date?

Here’s my code:

import { initializeBlock, useBase, useRecords } from '@airtable/blocks/ui';
import React from 'react';

function MainApp() {
  const base = useBase();
  
  // grab all the tables I need
  const allTables = React.useMemo(() => {
    return {
      itemsTable: base.getTableByNameIfExists(Settings.ITEMS_TABLE_NAME),
      pricesTable: base.getTableByNameIfExists(Settings.PRICES_TABLE_NAME),
      clientsTable: base.getTableByNameIfExists(Settings.CLIENTS_TABLE_NAME),
      salesTable: base.getTableByNameIfExists(Settings.SALES_TABLE_NAME),
      teamTable: base.getTableByNameIfExists(Settings.TEAM_TABLE_NAME),
    };
  }, [base]);
  console.log('connected to all tables...')

  const salesData = useRecords(allTables.salesTable);
  console.log('loaded sales records...')
  const teamData = useRecords(allTables.teamTable);
  console.log('loaded team records...')
  const pricesData = useRecords(allTables.pricesTable);
  console.log('loaded pricing records...')
  const itemsData = useRecords(allTables.itemsTable);
  console.log('loaded items records...')
  const clientsData = useRecords(allTables.clientsTable);
  console.log('loaded client records...')
}

What I see in console:

connected to all tables...
...
connected to all tables...
loaded sales records...
...
connected to all tables...
loaded sales records...
loaded team records...
...
connected to all tables...
loaded sales records...
loaded team records...
loaded pricing records...
2

I’ve seen this before - your component’s definitely remounting instead of just re-rendering. Wrap all those useRecords calls in a single useMemo with tables as dependencies. They’ll only fire when tables actually change, not every render. Also check if your Settings object gets recreated somewhere, causing the table names to change.

3

This looks like a React re-rendering issue where your component keeps mounting instead of just updating. I’ve hit this exact problem when working with multiple data sources in custom blocks. The fix that worked for me: add proper error handling and null checks before calling useRecords. Your tables might be undefined initially, which makes the hooks go haywire. Wrap each useRecords call in a conditional to make sure the table exists first. Also, pass the specific fields you need as the second parameter instead of loading entire tables - cuts down on data processing and helps performance. That restart behavior screams “error causing React to remount the whole component tree.”

4

You’ve got dependency hell - each useRecords hook is triggering another render cycle. Hit this exact nightmare last month building a reporting block. The problem is how Airtable’s block framework handles multiple hooks during initial mount. Don’t call useRecords sequentially like that. Build one master hook that manages all table subscriptions internally - something like const allRecords = useMultipleRecords([salesTable, teamTable, pricesTable]) and handle the subscription logic once. Airtable blocks don’t play nice with React’s usual hook patterns when you’ve got heavy data dependencies. Also check your Settings object isn’t getting recreated - tiny reference changes will cascade through all your table lookups and restart everything.

5

The restart loop is happening because your allTables object keeps changing references between renders, even with useMemo. I hit this exact same issue last year.

Your Settings object or the base itself is probably getting recreated. Log the table objects and check if they’re actually the same instances.

Here’s what fixed it for me - put everything in one effect:

const [allData, setAllData] = React.useState({});

React.useEffect(() => {
  if (!allTables.salesTable || !allTables.teamTable) return;
  
  const loadAllData = async () => {
    const sales = useRecords(allTables.salesTable);
    const team = useRecords(allTables.teamTable);
    // ... rest of your tables
    
    setAllData({ sales, team, prices, items, clients });
  };
  
  loadAllData();
}, [allTables]);

Double-check your Settings constants too. If they’re getting redefined somewhere, your table lookups will fail randomly.

That console pattern you’re seeing? Classic React remounting. Fix those table references and the restarting should stop.

6

Had this exact issue building a multi-table dashboard block. The problem isn’t useRecords - it’s how React handles the hook dependency chain. Your Settings object gets recreated every render, making table references unstable even with useMemo. I fixed it by moving table name constants outside the component or storing them once with useState. Also, batch your useRecords calls instead of five separate ones. Create a custom hook that handles all tables together - the Airtable block system struggles with multiple simultaneous hook calls during initialization. One more thing: add a loading state check before rendering anything that needs the record data. Otherwise you’ll get partial renders that trigger the restart cycle.