Multiple useRecords hooks to different tables force repeated app restarts

Hi Michael,
As you point out, the useRecords() hook will update the component used by your app with the underlying data changes to records, but it also handles loading data automatically.

Within the useRecords() hook we use suspense while loading data so that downstream logic does not get called until the data has finished loading. As you see from your console output, this causes the component to be re-rendered with each call of useRecords() before the next line can be executed.

You might be able to reduce some of the slowness your app is experiencing by starting the data load outside of the useRecords() call which uses the suspended loads. loadDataAsync() will allow you to do this asynchronously for each table and can be called from a query result, such as the one returned by table.selectRecords(). That way, the data for each table starts loading before suspense is used via useRecords().

You’ll still see the component re-render once the data for each is finished loading, but since the loading will now happen asynchronously, this should cut out some of the overall load time. Here’s what that might look like:

const base = useBase();
  // get all necessary Airtable tables
  const tables = React.useMemo(() => {
    return {
      productTable: base.getTableByNameIfExists(Constants.PRODUCTS_TABLE_NAME),
      costTable: base.getTableByNameIfExists(Constants.COST_TABLE_NAME),
      contactsTable: base.getTableByNameIfExists(Constants.CONTACTS_TABLE_NAME),
      conversionTable: base.getTableByNameIfExists(Constants.CONVERSIONS_TABLE_NAME),
      contributorTable: base.getTableByNameIfExists(Constants.CONTRIBUTORS_TABLE_NAME),
    };
  }, [base]);
    console.log('tables have been connected...')

    const productTableQueryResult = tables.productTable.selectRecords()
    const costTableQueryResult = tables.costTable.selectRecords()
    const contactsTableQueryResult = tables.contactsTable.selectRecords()
    const conversionTableQueryResult = tables.conversionTable.selectRecords()
    const contributorTableQueryResult = tables.contributorTable.selectRecords()
    
    React.useEffect( () => {
        productTableQueryResult.loadDataAsync()
        costTableQueryResult.loadDataAsync()
        contactsTableQueryResult.loadDataAsync()
        conversionTableQueryResult.loadDataAsync()
        contributorTableQueryResult.loadDataAsync()

        return () => {
            productTableQueryResult.unloadData()
            costTableQueryResult.unloadData()
            contactsTableQueryResult.unloadData()
            conversionTableQueryResult.loadDataAsync()
            contributorTableQueryResult.loadDataAsync()
        }
    }, [])

  const conversions = useRecords(tables.conversionTable);
  console.log('conversions data has been read...')
  const contributors = useRecords(tables.contributorTable);
  console.log('contributor data has been read...')
  const costs = useRecords(tables.costTable);
  console.log('tracker data has been read...')
  const products = useRecords(tables.productTable);
  console.log('product data has been read...')
  const vendors = useRecords(tables.contactsTable);
  console.log('vendor data has been read...')

Let us know if that works for you.