Hey fellow React Native devs, I recently hit a wall building a chat app: I wanted to replicate WhatsApp's seamless message experience where users never see unloaded data or blank gaps—even when scrolling through thousands of messages.

We all know WhatsApp renders messages almost instantly, and it’s safe to assume they use an onEndReach-style loading mechanism under the hood. But in my app, a standard FlatList with thousands of entries was painfully slow. I worked through React Native's official FlatList optimization guidelines and saw some gains, but it still wasn’t enough—users could spot loading delays and blank content as they scrolled.

I dug through countless resources looking for a clear, complete fix and came up empty-handed, so I wanted to share what finally worked for me to help anyone stuck in the same spot.

My Proven Solution: Hybrid Preloading + Hyper-Optimized Windowing #

Here’s the combination of tweaks that gave me that instant, WhatsApp-like smoothness:

• Aggressively Tuned onEndReached Preloading
  Instead of waiting until the user is near the end of the loaded list to fetch more data, I cranked up the onEndReachedThreshold to 0.5 (from the default 0.1). This triggers a data fetch when the user is halfway through the currently rendered content, giving the app plenty of time to load and process the next batch before the user scrolls to it. I added a short 100ms debounce to prevent duplicate calls, but kept it tight enough to avoid any lag.

• Maximize FlatList’s Built-in Optimizations
  I doubled down on the official best practices but made sure to implement them correctly:

  • Enable removeClippedSubviews={true} to offload rendering of off-screen items—this is non-negotiable for large lists.
  • Use getItemLayout to let FlatList calculate item positions without measuring every single entry. This drastically improves scroll smoothness. Example code:

    const getItemLayout = (data, index) => ({
      length: MESSAGE_ITEM_HEIGHT, // Use fixed or pre-calculated height
      offset: MESSAGE_ITEM_HEIGHT * index,
      index,
    });
    

  • Wrap your message item component in React.memo and use shallow prop comparison to prevent unnecessary re-renders. Avoid passing new objects/functions on every render (use useCallback and useMemo where needed).
  • Set initialNumToRender to a value that fills the screen plus 5-10 extra items—enough to make the initial load feel instant, but not so many that it slows down the first render.

• Background Pre-Rendering of Off-Screen Batches
  I used InteractionManager.runAfterInteractions to trigger a background task that pre-fetches and processes the next 2-3 batches of messages whenever the app is idle. This way, the data is already parsed and ready to render by the time the user scrolls to it, eliminating any perceived delay.

• Minimize Dynamic Heights
  WhatsApp uses fixed bubble sizes for most message types, so I followed suit where possible. If you need variable heights, pre-calculate and cache each message’s height using useLayoutEffect so FlatList doesn’t have to re-measure items on every scroll. For dynamic text, use libraries to calculate text height upfront and store it in your data model.

Final Takeaway #

The secret is to eliminate any gap between when the user needs the data and when it’s ready to render. By combining aggressive preloading, optimized FlatList settings, background processing, and smart caching, I got my app to render thousands of messages almost instantly—no blank spaces, no noticeable delays, just smooth, WhatsApp-like scrolling.

内容的提问来源于stack exchange，提问作者Orkun