Custom app performance issue: Multiple table data fetches causing repeated restarts

Other Questions Airtable
1

Hey everyone, I’m having a problem with my custom app. It’s really slow to load because it keeps restarting. I’m using useRecords to get data from different tables and keep it updated. But every time I use useRecords, the app starts over. Is there a way to fix this?

Here’s what my code looks like:

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

function MyCustomApp() {
  const myBase = useBase();
  const tablesToUse = React.useMemo(() => ({
    itemsTable: myBase.getTableByNameIfExists('Items'),
    pricesTable: myBase.getTableByNameIfExists('Prices'),
    clientsTable: myBase.getTableByNameIfExists('Clients'),
    salesTable: myBase.getTableByNameIfExists('Sales'),
    teamTable: myBase.getTableByNameIfExists('Team'),
  }), [myBase]);

  console.log('Connected to tables');

  const sales = useRecords(tablesToUse.salesTable);
  console.log('Got sales data');
  const team = useRecords(tablesToUse.teamTable);
  console.log('Got team data');
  const prices = useRecords(tablesToUse.pricesTable);
  console.log('Got prices data');
  const items = useRecords(tablesToUse.itemsTable);
  console.log('Got items data');
  const clients = useRecords(tablesToUse.clientsTable);
  console.log('Got clients data');
}

The console shows it’s connecting to tables and getting data over and over. Any ideas on how to make this better while still keeping the data up-to-date? Thanks!

2

hey, i’ve seen this before. seems like using useRecords for evry table is overkill. try fetching main data first and add the rest later. also consider wrapping useRecords calls in memo hooks to cut rerenders, that might help. cheers!

3

I encountered a similar issue in one of my projects. The underlying problem is that useRecords tends to trigger re-renders more frequently than expected, especially when managing multiple tables. An effective solution I found was to store data using useGlobalConfig so that data once fetched is maintained and only updated selectively when changes occur. Additionally, using useWatchable to monitor specific tables can help avoid re-rendering the whole app. This strategy reduces unnecessary re-renders and improves performance, though it requires a bit more initial setup. This approach has proven beneficial in maintaining data integrity while optimizing app responsiveness.

4

I’ve dealt with similar performance issues in my Airtable custom apps. One approach that worked wonders for me was implementing a custom hook to manage data fetching. Here’s a rough idea:

function useTableData(table) {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    if (table) {
      const queryResult = table.selectRecords();
      queryResult.loadData();
      setData(queryResult.records);
      
      return () => queryResult.unloadData();
    }
  }, [table]);
  
  return data;
}

Then in your main component:

const sales = useTableData(tablesToUse.salesTable);
const team = useTableData(tablesToUse.teamTable);
// ... and so on

This way, you’re only fetching data when the table reference changes, which should be rare. It significantly reduced restarts in my app while keeping data fresh. You might need to tweak it based on your specific needs, but it’s a solid starting point.