Fetching Airtable records in chunks using React Native FlatList with infinite scroll

Other Questions Airtable
1

Hey everyone! I’m trying to figure out how to load Airtable records in smaller chunks as users scroll down a React Native FlatList. Right now, I’ve got it set up to fetch all records at once, which isn’t ideal for performance.

Here’s what I’ve tried so far:

const AirtableViewer = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [cursor, setCursor] = useState(null);

  const fetchChunk = async () => {
    setLoading(true);
    // Imagine API call here
    const result = await fetchRecords(cursor);
    setData([...data, ...result.records]);
    setCursor(result.nextCursor);
    setLoading(false);
  };

  useEffect(() => {
    fetchChunk();
  }, []);

  const loadMore = () => {
    if (!loading && cursor) {
      fetchChunk();
    }
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <RecordItem record={item} />}
      onEndReached={loadMore}
      onEndReachedThreshold={0.1}
      ListFooterComponent={loading ? <LoadingSpinner /> : null}
    />
  );
};

This code currently loads all records at once rather than in batches. Does anyone have ideas on how to fix this behavior? Thanks in advance!

2

hey mike, i’ve worked w/ airtable before. ur close! try adjusting ur fetchRecords function to accept a limit param:

fetchRecords(cursor, limit = 20)

then in ur API call, use that limit. this’ll fetch smaller chunks. also, make sure ur not calling fetchChunk multiple times when scrolling fast. maybe add a lil delay:

const loadMore = debounce(() => {
if (!loading && cursor) fetchChunk();
}, 200);

hope this helps!

3

I’ve worked extensively with Airtable and React Native, and your approach is on the right track. The key is to leverage Airtable’s built-in pagination support. Modify your fetchRecords function to include a maxRecords parameter:

async function fetchRecords(cursor, maxRecords = 20) {
// API call with maxRecords and offset (cursor)
}

This ensures you’re only fetching a limited number of records each time. Also, consider implementing a throttle or debounce on your loadMore function to prevent excessive API calls during rapid scrolling:

const loadMore = throttle(() => {
if (!loading && cursor) fetchChunk();
}, 200);

Lastly, optimize your RecordItem component. Use React.memo if it’s a pure component, and avoid complex calculations within it. These tweaks should significantly improve your FlatList’s performance with large Airtable datasets.

4

I’ve dealt with a similar issue when building an app that needed to display thousands of records from an external API. The key is definitely implementing proper pagination, as you’ve started to do.

One thing that really helped in my case was adding a small delay before triggering the next fetch. This prevented the API from getting hammered with requests if the user scrolled quickly. Something like:

const loadMore = () => {
  if (!loading && cursor) {
    setTimeout(() => {
      fetchChunk();
    }, 300);
  }
};

Also, I found it beneficial to implement some basic caching. If a user scrolls back up, you can avoid re-fetching data they’ve already seen. You might want to look into libraries like react-query for this.

Lastly, make sure your RecordItem component is optimized. If it’s doing any heavy lifting, consider using React.memo to prevent unnecessary re-renders.

Hope this helps! Let me know if you run into any other issues.