Airtable custom app: Multiple table syncs causing frequent restarts

Other Questions Airtable
1

Hey folks, I’m having trouble with my Airtable custom app. It’s supposed to show data from different tables and keep everything updated. I’m using the useRecords hook for each table, but now the app is super slow and keeps restarting.

Here’s what’s happening:

  1. The app connects to the tables
  2. It reads data from each table one by one
  3. After each table is read, the app restarts
  4. This cycle repeats for all tables

Is there a way to stop these restarts but still keep all the data current? I’ve tried using React.useMemo for the table connections, but it didn’t help.

Here’s a simplified version of my code:

function DataApp() {
  const base = useDatabase();
  const tables = React.useMemo(() => ({
    items: base.getTableByName('Items'),
    prices: base.getTableByName('Prices'),
    users: base.getTableByName('Users'),
  }), [base]);

  const items = useRecords(tables.items);
  const prices = useRecords(tables.prices);
  const users = useRecords(tables.users);

  // Rest of the app logic
}

Any ideas on how to make this more efficient? Thanks!

2

hey hermione, i’ve run into similar issues before. have u tried using useWatchable instead of useRecords? it lets u subscribe to changes without constant reloads. also, maybe batch ur data fetching into one useEffect hook? that way u only trigger one update cycle. good luck!

3

I’ve been down this road before, and it can be frustrating. One approach that worked wonders for me was implementing a custom hook to manage all the table data fetching. Here’s a rough idea:

function useTableData(base, tableNames) {
  const [data, setData] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      const newData = {};
      for (const name of tableNames) {
        const table = base.getTableByName(name);
        newData[name] = await table.selectRecordsAsync();
      }
      setData(newData);
    };
    fetchData();
  }, [base]);

  return data;
}

Then in your main component:

function DataApp() {
  const base = useBase();
  const tableData = useTableData(base, ['Items', 'Prices', 'Users']);

  // Use tableData.Items, tableData.Prices, etc.
}

This approach consolidates all data fetching into a single effect, reducing the number of restarts. It also provides a cleaner interface for accessing your table data. Just remember to add appropriate loading and error states!

4

I’ve encountered this issue in my Airtable custom app development as well. One effective strategy I’ve implemented is to use the useGlobalConfig hook to store and manage the data fetched from multiple tables. This approach reduces the number of re-renders and improves overall performance.

Here’s a basic implementation:

function DataApp() {
  const base = useBase();
  const globalConfig = useGlobalConfig();

  useEffect(() => {
    async function fetchData() {
      const tables = ['Items', 'Prices', 'Users'];
      for (const tableName of tables) {
        const table = base.getTableByName(tableName);
        const records = await table.selectRecordsAsync();
        globalConfig.setAsync(`${tableName}Data`, records);
      }
    }
    fetchData();
  }, []);

  // Access data using globalConfig.get('ItemsData'), etc.
  // Rest of your app logic
}

This method centralizes data management and minimizes unnecessary restarts. Remember to implement proper error handling and loading states for a smoother user experience.