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.