Infinite scrolling (onEndReached) in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is infinite scrolling in a mobile app?

Infinite scrolling is a way to load more content automatically when the user scrolls near the end of a list, so they don’t have to tap a button to see more.

beginner

In React Native, which prop triggers loading more data when the user scrolls near the end of a FlatList?

The onEndReached prop triggers a function when the user scrolls close to the end of the list.

intermediate

Why should you use a loading state when implementing infinite scrolling?

A loading state prevents multiple data requests at the same time and shows the user that new content is loading.

intermediate

What is a common problem if you don’t set onEndReachedThreshold properly?

If the threshold is too low or too high, onEndReached may trigger too early or too late, causing bad user experience or repeated loading.

intermediate

How can you avoid loading the same data multiple times in infinite scrolling?

Use a flag like loading to block new requests until the current one finishes, and update your data list carefully.

What does the onEndReached prop do in a React Native FlatList?

A Triggers a function when the user scrolls near the end of the list

B Stops the list from scrolling

C Refreshes the list when pulled down

D Changes the list layout

onEndReached is used to detect when the user scrolls near the end, so you can load more data.

Which prop controls how close to the end the onEndReached event fires?

A onScroll

B onEndReachedThreshold

C scrollEnabled

D initialNumToRender

onEndReachedThreshold sets the distance from the end (as a fraction) to trigger onEndReached.

Why is it important to have a loading state when implementing infinite scrolling?

A To prevent multiple simultaneous data fetches

B To change the background color

C To disable scrolling

D To reset the list

The loading state helps avoid sending many requests at once and shows the user that data is loading.

What happens if you don’t handle onEndReached properly?

A The list becomes unscrollable

B The list never loads any data

C The app crashes immediately

D You might load data repeatedly or too late

Improper handling can cause repeated or delayed data loading, hurting user experience.

Which React Native component is commonly used with onEndReached for infinite scrolling?

A TextInput

B ScrollView

C FlatList

D Button

FlatList supports onEndReached and is optimized for large lists.

Explain how infinite scrolling works in React Native using FlatList and onEndReached.

Think about how the app knows when to load more items as you scroll.

Describe common challenges when implementing infinite scrolling and how to solve them.

Consider what happens if the app loads data too often or too late.

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