Infinite scrolling (onEndReached) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when onEndReached triggers in this FlatList?

Consider this React Native FlatList component with an onEndReached handler that fetches more items. What will the user see after scrolling to the bottom once?

React Native

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

export default function App() {
  const [items, setItems] = useState(Array.from({ length: 20 }, (_, i) => i + 1));

  const loadMore = () => {
    const newItems = Array.from({ length: 10 }, (_, i) => items.length + i + 1);
    setItems([...items, ...newItems]);
  };

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

A Nothing happens because onEndReached is not called automatically.

B The list will reset and show only the first 10 items again.

C The list will add 10 more items at the bottom, so the user can scroll further down.

D The list will crash because setItems is called inside onEndReached.

💡 Hint

Think about what the loadMore function does when called.

The onEndReached triggers when the user scrolls near the bottom. The loadMore function adds 10 new items to the existing list, so the list grows and the user can scroll further.

❓ lifecycle

intermediate

Why might onEndReached fire multiple times rapidly in this example?

Look at this FlatList with onEndReached calling fetchMore. Why could the fetchMore function be called many times quickly when scrolling to the bottom?

React Native

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

export default function App() {
  const [data, setData] = useState(Array.from({ length: 15 }, (_, i) => i + 1));

  const fetchMore = () => {
    const more = Array.from({ length: 5 }, (_, i) => data.length + i + 1);
    setData([...data, ...more]);
  };

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

A Because onEndReachedThreshold is set too high, so it never triggers.

B Because onEndReached triggers every time the user scrolls near the bottom, and fetchMore updates state causing re-render, triggering onEndReached again immediately.

C Because fetchMore is asynchronous and React Native queues multiple calls automatically.

D Because FlatList requires a debounce function to work properly.

💡 Hint

Think about what happens when state updates inside onEndReached.

When fetchMore updates the data state, the FlatList re-renders and the scroll position is still near the bottom, causing onEndReached to fire again immediately. This can cause multiple rapid calls.

🔧 Debug

advanced

What error occurs with this onEndReached handler?

This FlatList's onEndReached handler tries to fetch more data but causes an error. What error will this code produce?

React Native

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

export default function App() {
  const [items, setItems] = useState([1, 2, 3]);

  const loadMore = () => {
    setItems(items.push(items.length + 1));
  };

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

A TypeError: setItems is called with a number instead of an array.

B SyntaxError: Missing parentheses in function call.

C RuntimeError: Infinite loop detected in onEndReached.

D No error, the list updates correctly.

💡 Hint

Check what Array.push returns and what setItems expects.

Array.push returns the new length of the array, not the array itself. So setItems is called with a number, causing a TypeError because data must be an array.

🧠 Conceptual

advanced

Which option best prevents multiple onEndReached calls during loading?

You want to avoid multiple fetches while loading more data in onEndReached. Which approach below correctly prevents multiple calls?

A Use a global variable outside the component to track calls.

B Call fetchMore inside a setTimeout with 0 delay to delay execution.

C Remove onEndReachedThreshold so onEndReached triggers only once.

D Use a loading state boolean to skip fetchMore if already loading, setting loading true before fetch and false after.

💡 Hint

Think about how to track if a fetch is in progress inside the component.

Using a loading boolean state inside the component to block fetchMore calls while loading is the correct way to prevent multiple simultaneous fetches.

❓ navigation

expert

What is the best way to reset FlatList scroll position after loading new data?

After loading more items in onEndReached, you want to reset the FlatList scroll to the top. Which method correctly achieves this?

React Native

import React, { useState, useRef } from 'react';
import { FlatList, Text, Button } from 'react-native';

export default function App() {
  const [data, setData] = useState(Array.from({ length: 20 }, (_, i) => i + 1));
  const listRef = useRef(null);

  const loadMore = () => {
    const more = Array.from({ length: 10 }, (_, i) => data.length + i + 1);
    setData([...data, ...more]);
    // Reset scroll here
  };

  return (
    <>
      <Button title="Load More and Scroll Top" onPress={loadMore} />
      <FlatList
        ref={listRef}
        data={data}
        keyExtractor={item => item.toString()}
        renderItem={({ item }) => <Text>{`Item ${item}`}</Text>}
      />
    </>
  );
}

A Call listRef.current.scrollToOffset({ offset: 0, animated: true }) right after setData in loadMore.

B Call listRef.current.scrollToIndex({ index: 0 }) before setData in loadMore.

C Call listRef.current.scrollToEnd() after setData in loadMore.

D Use FlatList's initialScrollIndex prop to 0 and update it after loading.

💡 Hint

Think about how to scroll programmatically after state updates.

Calling scrollToOffset with offset 0 after updating data scrolls the list to the top. Doing it before setData or using scrollToEnd won't reset to top.