Infinite scrolling (onEndReached) in React Native - Deep Dive

Overview - Infinite scrolling (onEndReached)

What is it?

Infinite scrolling is a way to load more content automatically when the user scrolls near the end of a list. In React Native, the onEndReached event triggers a function to fetch and show more items. This creates a smooth experience without needing buttons to load more. It helps apps handle large data without slowing down.

Why it matters

Without infinite scrolling, users must tap buttons or wait for full data loads, which feels slow and clunky. Infinite scrolling keeps users engaged by showing new content seamlessly as they explore. It saves device memory by loading data in chunks, improving app speed and user satisfaction.

Where it fits

Learners should know basic React Native components and state management before this. After mastering infinite scrolling, they can learn about pagination, caching data, and optimizing performance for large lists.

Mental Model

Core Idea

Infinite scrolling loads more data automatically when the user reaches the end of a list, creating a continuous browsing experience.

Think of it like...

It's like walking down a never-ending hallway where new rooms open up just as you approach the last door, so you never run out of places to explore.

List View
┌─────────────────────────┐
│ Item 1                  │
│ Item 2                  │
│ ...                     │
│ Item N-1                │
│ Item N (near end)       │ ← onEndReached triggers here
│ Loading more items...    │
└─────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding FlatList Basics

Concept: Learn how FlatList displays a scrollable list of items in React Native.

FlatList is a component that efficiently renders a list of data. You provide it an array and a function to render each item. It handles scrolling and only renders visible items to save memory.

Result

You see a scrollable list of items on the screen.

Knowing FlatList basics is essential because infinite scrolling builds on its scrolling and rendering features.

2

Foundation

State and Data Loading Basics

Concept: Manage list data using React state and load initial items.

Use useState to hold your list data. Initially load a small set of items. Render them with FlatList. This sets the stage for adding more data later.

Result

The app shows a list with initial items from state.

Understanding state-driven data lets you update the list dynamically when new items arrive.

3

Intermediate

Using onEndReached to Detect Scroll End

🤔Before reading on: do you think onEndReached triggers exactly at the last item or slightly before? Commit to your answer.

Concept: onEndReached fires when the user scrolls near the end of the list, not necessarily at the last item.

Add onEndReached prop to FlatList with a function to load more data. It triggers when the scroll position passes a threshold near the end. This helps pre-load data before the user hits the bottom.

Result

When scrolling near the bottom, the load more function runs automatically.

Knowing onEndReached triggers early helps avoid blank screens and keeps loading smooth.

4

Intermediate

Handling Loading State and Preventing Multiple Calls

🤔Before reading on: do you think onEndReached can fire multiple times quickly? Commit to yes or no.

Concept: Manage a loading flag to avoid triggering multiple data fetches simultaneously.

Use a loading state variable. When loading starts, set it true. Ignore onEndReached calls while loading is true. Set it false after data loads. This prevents duplicate fetches and race conditions.

Result

The app loads more data only once per scroll end, avoiding overload.

Controlling loading state prevents bugs and wasted network calls.

5

Intermediate

Appending New Data to Existing List

Concept: Add newly fetched items to the existing list state instead of replacing it.

When new data arrives, use setState(prev => [...prev, ...newData]) to append. This keeps old items visible and adds new ones at the bottom.

Result

The list grows longer as you scroll, showing all loaded items.

Appending data preserves user context and creates the infinite scroll effect.

6

Advanced

Optimizing onEndReached Threshold and Performance

🤔Before reading on: do you think setting onEndReachedThreshold too high or too low affects user experience? Commit to your answer.

Concept: Adjust onEndReachedThreshold to control how early loading triggers and optimize performance.

onEndReachedThreshold is a number between 0 and 1 representing how far from the end the event fires. Too high triggers too early, wasting resources. Too low causes loading delays and blank screens. Find a balance based on item size and network speed.

Result

Smooth loading with minimal waiting or wasted fetches.

Tuning threshold improves perceived app speed and resource use.

7

Expert

Handling Edge Cases and User Experience

🤔Before reading on: do you think infinite scrolling works well for all types of content? Commit to yes or no.

Concept: Consider cases like no more data, errors, and user control for best UX.

Show a message or stop loading when no more items exist. Handle fetch errors gracefully with retry options. Optionally add a manual 'Load More' button for user control. Combine infinite scroll with pull-to-refresh for full experience.

Result

Robust, user-friendly infinite scrolling that handles real-world scenarios.

Anticipating edge cases prevents frustration and improves app quality.

Under the Hood

FlatList tracks the scroll position and calculates how close the user is to the end. When the scroll offset passes a threshold near the bottom, it triggers onEndReached. This event lets the app fetch more data asynchronously and update the list state. FlatList then re-renders with new items, maintaining smooth scrolling by only rendering visible items.

Why designed this way?

Infinite scrolling was designed to improve user experience by avoiding manual pagination. React Native's FlatList uses onEndReached to balance performance and usability, triggering data loads early enough to prevent empty screens but not too early to waste resources. This design supports large datasets on limited mobile memory.

Scroll Position Tracking
┌─────────────────────────────┐
│ Scroll Event Listener        │
│                             │
│ ┌───────────────────────┐   │
│ │ Scroll Offset Check    │───┼─> If near end, trigger onEndReached
│ └───────────────────────┘   │
│                             │
│ ┌───────────────────────┐   │
│ │ Fetch More Data       │<───┼─ App fetches asynchronously
│ └───────────────────────┘   │
│                             │
│ ┌───────────────────────┐   │
│ │ Update List State     │<───┼─ Append new items
│ └───────────────────────┘   │
│                             │
│ ┌───────────────────────┐   │
│ │ FlatList Re-render    │<───┼─ Show new items
│ └───────────────────────┘   │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does onEndReached fire only once when you hit the last item? Commit yes or no.

Common Belief: onEndReached fires only once exactly at the last item.

Reality: onEndReached fires when the scroll position passes a threshold near the end, which can happen multiple times during scrolling.

Why it matters: Assuming it fires once causes bugs like multiple fetches or missed loads.

Quick: Is infinite scrolling always better than pagination? Commit yes or no.

Common Belief: Infinite scrolling is always the best way to load lists.

Reality: Infinite scrolling can overwhelm users or cause performance issues; sometimes pagination or manual loading is better.

Why it matters: Choosing infinite scroll blindly can hurt usability and app stability.

Quick: Does setting onEndReachedThreshold to 0 mean loading triggers exactly at the end? Commit yes or no.

Common Belief: Setting onEndReachedThreshold to 0 triggers loading exactly at the last item.

Reality: A threshold of 0 may cause loading to trigger too late, causing blank screens or delays.

Why it matters: Misconfiguring threshold leads to poor user experience.

Quick: Can you ignore loading state when using onEndReached? Commit yes or no.

Common Belief: You don't need to manage loading state; onEndReached handles it automatically.

Reality: Without loading state, onEndReached can trigger multiple fetches simultaneously, causing bugs.

Why it matters: Ignoring loading state wastes network and causes UI glitches.

Expert Zone

1

onEndReached can fire multiple times rapidly if not throttled, so debouncing or loading flags are critical in production.

2

The perceived smoothness depends heavily on network speed and data size; prefetching strategies can improve UX.

3

Combining infinite scroll with pull-to-refresh requires careful state management to avoid conflicts.

When NOT to use

Avoid infinite scrolling for content where users need precise control or want to reach a footer quickly. Use pagination or manual 'Load More' buttons instead. Also, for very large datasets with complex filtering, server-driven pagination is better.

Production Patterns

Real apps use infinite scrolling with loading spinners, error handling, and caching. They often combine it with analytics to track user engagement and optimize thresholds dynamically. Some use libraries that abstract onEndReached for better performance and customization.

Connections

Pagination

Alternative approach to loading data in chunks

Understanding pagination helps decide when infinite scrolling is appropriate or when explicit page controls improve user experience.

Event-driven programming

onEndReached is an event callback triggered by user scroll actions

Knowing event-driven patterns clarifies how UI reacts asynchronously to user input and system state.

Human-computer interaction (HCI)

Infinite scrolling affects how users perceive and interact with content

HCI principles guide when infinite scrolling improves engagement or causes fatigue, informing better design choices.

Common Pitfalls

#1 Triggering multiple data fetches simultaneously causing duplicated items and wasted network calls.

Wrong approach:

const [loading, setLoading] = useState(false);

const loadMore = () => {
fetchData(); // no loading check
};

Correct approach:

const [loading, setLoading] = useState(false);

const loadMore = () => {
if (loading) return;
setLoading(true);
fetchData().then(() => setLoading(false));
};

Root cause:

Not managing loading state allows onEndReached to call fetch repeatedly before previous fetch finishes.

#2 Replacing list data instead of appending, causing list to reset and user to lose scroll position.

Wrong approach:

setData(newData); // replaces old data

Correct approach:

setData(prevData => [...prevData, ...newData]); // appends new items

Root cause:

Misunderstanding that new data should be added to existing list, not overwrite it.

#3 Setting onEndReachedThreshold too low causing loading to trigger too late and blank screens.

Wrong approach:

Correct approach:

Root cause:

Not realizing threshold controls how early loading triggers before reaching end.

Key Takeaways

Infinite scrolling uses onEndReached to load more data automatically as users near the end of a list.

Managing loading state and appending data correctly prevents bugs and ensures smooth user experience.

Tuning onEndReachedThreshold balances early loading with resource efficiency for better performance.

Infinite scrolling is not always the best choice; consider user control and content type before using it.

Handling edge cases like no more data and errors is essential for production-ready infinite scrolling.