Infinite scrolling (onEndReached) in React Native

Introduction

Infinite scrolling lets users keep seeing more items as they scroll down without pressing buttons. It feels smooth and natural, like browsing a long list that never ends.

Showing a long list of social media posts that loads more as you scroll.

Displaying search results that keep adding more items when you reach the bottom.

Loading more products in a shopping app without switching pages.

Viewing a chat history that loads older messages when you scroll up.

Browsing news articles that appear continuously as you scroll.

Syntax

React Native

import { FlatList } from 'react-native';

<FlatList
  data={dataArray}
  renderItem={renderItemFunction}
  keyExtractor={item => item.id.toString()}
  onEndReached={loadMoreFunction}
  onEndReachedThreshold={0.5}
/>

onEndReached is a function called when the list scroll reaches near the end.

onEndReachedThreshold controls how close to the end the event triggers (0.5 means half the visible length before the end).

Examples

This logs a message when the user scrolls near the end.

React Native

onEndReached={() => console.log('Load more items')}

This calls fetchMoreData when the user is 20% away from the bottom.

React Native

<FlatList
  onEndReached={fetchMoreData}
  onEndReachedThreshold={0.2}
/>

This increases the page number when the user reaches the very end of the list.

React Native

<FlatList
  onEndReached={() => setPage(page + 1)}
  onEndReachedThreshold={1}
/>

Sample App

This example shows a list that loads 10 more items each time you scroll near the bottom. It uses a loading spinner while fetching.

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';

export default function InfiniteScrollExample() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const fetchData = async () => {
    if (loading) return;
    setLoading(true);
    // Simulate fetching 10 new items
    setTimeout(() => {
      const newItems = Array.from({ length: 10 }, (_, i) => ({ id: (page - 1) * 10 + i + 1, title: `Item ${(page - 1) * 10 + i + 1}` }));
      setData(prev => [...prev, ...newItems]);
      setPage(prev => prev + 1);
      setLoading(false);
    }, 1000);
  };

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

  const renderItem = ({ item }) => <Text style={{ padding: 20, borderBottomWidth: 1 }}>{item.title}</Text>;

  return (
    <View style={{ flex: 1, marginTop: 50 }}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
        onEndReached={fetchData}
        onEndReachedThreshold={0.5}
        ListFooterComponent={loading ? <ActivityIndicator size="large" /> : null}
      />
    </View>
  );
}

Important Notes

Make sure to prevent multiple loads at the same time by checking a loading state.

Adjust onEndReachedThreshold to control how early the loading starts.

Use unique keys for list items to avoid rendering issues.

Summary

Infinite scrolling loads more content automatically as the user scrolls.

Use onEndReached in FlatList to detect when to load more.

Manage loading state to avoid repeated calls and show a loading indicator.

Practice

1.

What is the main purpose of the onEndReached prop in a React Native FlatList?

easy

A. To detect when the user scrolls near the end of the list to load more items

B. To refresh the list when the user pulls down

C. To set the initial number of items displayed

D. To style the list footer component

Solution

1. Step 1: Understand onEndReached role

   This prop triggers a function when the user scrolls near the end of the list.

2. Step 2: Compare with other options

   Refreshing is handled by onRefresh, initial items by initialNumToRender, and styling is unrelated.

3. Final Answer:

   To detect when the user scrolls near the end of the list to load more items -> Option A

4. Quick Check:

   onEndReached triggers loading more [OK]

Hint: Remember: onEndReached means near list end, load more [OK]

Common Mistakes:

• Confusing onEndReached with pull-to-refresh
• Thinking it controls initial render count
• Assuming it styles the list footer

2.

Which of the following is the correct way to use onEndReached in a FlatList?

<FlatList
  data={data}
  renderItem={renderItem}
  onEndReached={_____}
/>

easy

A. onEndReached()

B. loadMoreItems()

C. () => loadMoreItems

D. loadMoreItems

Solution

1. Step 1: Understand event handler syntax

   onEndReached expects a function, so we pass a function reference or an arrow function.

2. Step 2: Analyze options

   onEndReached() ("onEndReached()") calls an undefined function immediately. loadMoreItems() ("loadMoreItems()") executes immediately on render. () => loadMoreItems ("() => loadMoreItems") returns the function but does not call it when triggered. loadMoreItems ("loadMoreItems") passes the correct function reference.

3. Final Answer:

   loadMoreItems -> Option D

4. Quick Check:

   Pass a function reference, not call it immediately [OK]

Hint: Pass function reference `loadMoreItems`, not `loadMoreItems()` [OK]

Common Mistakes:

• Calling the function immediately instead of passing it
• Passing undefined or wrong function name
• Confusing function reference with function call

3.

Given this code snippet, what will happen when the user scrolls near the end of the list?

const [items, setItems] = React.useState([1, 2, 3]);
const loadMore = () => {
  setItems(prev => [...prev, prev.length + 1]);
};

return (
  <FlatList
    data={items}
    renderItem={({item}) => <Text>Item {item}</Text>}
    keyExtractor={item => item.toString()}
    onEndReached={loadMore}
  />
);

medium

A. The list will add one new item each time the end is reached

B. The list will reset to only one item

C. The list will not change because loadMore is not called

D. The app will crash due to infinite loop

Solution

1. Step 1: Understand loadMore function

   It adds a new item with value one greater than current length to the items array.

2. Step 2: Analyze onEndReached effect

   When user scrolls near the end, loadMore is called, so items grow by one each time.

3. Final Answer:

   The list will add one new item each time the end is reached -> Option A

4. Quick Check:

   onEndReached triggers loadMore which appends items [OK]

Hint: onEndReached calls loadMore, which adds one item [OK]

Common Mistakes:

• Thinking the list resets instead of appending
• Assuming loadMore is not called automatically
• Expecting a crash without seeing infinite state updates

4.

What is the main problem with this infinite scrolling implementation?

const [items, setItems] = React.useState([1, 2, 3]);
const loadMore = () => {
  setItems(prev => [...prev, prev.length + 1]);
};

return (
  <FlatList
    data={items}
    renderItem={({item}) => <Text>Item {item}</Text>}
    keyExtractor={item => item.toString()}
    onEndReached={loadMore}
    onEndReachedThreshold={0.1}
  />
);

Assume the list is short and the user scrolls to the bottom.

medium

A. The keyExtractor will cause duplicate keys error

B. The list will never load more items because onEndReachedThreshold is too low

C. loadMore will be called repeatedly causing many state updates and possible performance issues

D. The renderItem function is missing a return statement

Solution

1. Step 1: Understand onEndReached behavior

   When the list is short, scrolling near the end triggers loadMore repeatedly because the end is always near.

2. Step 2: Identify consequence

   This causes many state updates rapidly, which can cause performance problems or infinite loops.

3. Final Answer:

   loadMore will be called repeatedly causing many state updates and possible performance issues -> Option C

4. Quick Check:

   Repeated onEndReached calls cause performance issues [OK]

Hint: Short lists cause repeated onEndReached calls without loading guard [OK]

Common Mistakes:

• Ignoring repeated calls without loading state
• Blaming keyExtractor or renderItem incorrectly
• Thinking threshold prevents repeated calls

5.

You want to implement infinite scrolling with a loading spinner at the bottom. Which approach correctly prevents multiple loadMore calls while loading?

const [items, setItems] = React.useState([]);
const [loading, setLoading] = React.useState(false);

const loadMore = async () => {
  if (loading) return;
  setLoading(true);
  const newItems = await fetchMoreItems();
  setItems(prev => [...prev, ...newItems]);
  setLoading(false);
};

return (
  <FlatList
    data={items}
    renderItem={({item}) => <Text>{item}</Text>}
    keyExtractor={item => item.id}
    onEndReached={loadMore}
    ListFooterComponent={loading ? <ActivityIndicator /> : null}
  />
);

What is the key reason this works well?

hard

A. It uses ListFooterComponent to prevent scrolling

B. It uses a loading state to block new calls until the current load finishes

C. It resets items to empty before loading new ones

D. It calls fetchMoreItems synchronously to avoid delays

Solution

1. Step 1: Identify loading state role

   The loading state prevents loadMore from running if a load is already in progress.

2. Step 2: Understand async loading and UI feedback

   While loading, the spinner shows in the footer, and new calls are blocked until loading finishes.

3. Final Answer:

   It uses a loading state to block new calls until the current load finishes -> Option B

4. Quick Check:

   Loading state blocks repeated calls during fetch [OK]

Hint: Use loading flag to block repeated loads and show spinner [OK]

Common Mistakes:

• Not blocking repeated calls causing multiple fetches
• Calling fetchMoreItems synchronously (wrong)
• Misusing ListFooterComponent to block scrolling