Why Infinite scrolling (onEndReached) in React Native? - Purpose & Use Cases

The Big Idea

What if your app could magically load more content just when you need it, without any waiting?

The Scenario

Imagine you have a long list of items, like a photo gallery or messages, and you want to show them all at once on your phone screen.

You try to load every single item manually when the app starts.

The Problem

This approach makes your app slow and clunky because it tries to load too much data at once.

Users have to wait a long time, and the app might even crash or freeze.

The Solution

Infinite scrolling with onEndReached lets your app load just a few items at first.

When the user scrolls near the end, the app automatically loads more items smoothly.

This keeps the app fast and responsive, giving a better experience.

Before vs After

✗ Before

loadAllItems();
displayList(items);

✓ After

loadInitialItems();
const onEndReached = () => loadMoreItems();

What It Enables

You can create smooth, fast lists that grow as the user scrolls, without freezing or long waits.

Real Life Example

Think of social media apps like Instagram or Twitter where new posts appear as you scroll down endlessly.

Key Takeaways

Loading all data at once slows down apps and wastes resources.

onEndReached triggers loading more data only when needed.

This technique creates smooth, user-friendly scrolling experiences.

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