{"id":"l-rn-2-4","courseId":"react-native-apps","lang":"en","kind":"lesson","summary":"Render Trailhead’s growing hike log with FlatList and SectionList, understand virtualization, and apply the handful of optimizations that keep long lists smooth on mid-range phones.","html":"

Trailhead’s log starts with a dozen hikes. A keen hiker logs three a week; after four years that’s over 600 rows, each with a thumbnail, a title and a few stats. Render that with ScrollView and .map(), and the app builds every row’s native views before showing the first frame. On a flagship phone you might not notice. On the mid-range Android phones most of the world uses, you get a blank screen and a stutter.

\n

FlatList: render what’s visible

\n

FlatList takes your data and a function to render one item, and it only mounts the rows near the viewport:

\n
src/app/index.tsx
import { FlatList, Text, View } from 'react-native';\nimport { HikeRow } from '../components/HikeRow';\nimport { useHikes } from '../state/hikes';\n\nexport default function HikeLog() {\n  const hikes = useHikes();\n\n  return (\n    <FlatList\n      data={hikes}\n      keyExtractor={(hike) => hike.id}\n      renderItem={({ item }) => <HikeRow hike={item} />}\n      ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: '#e2e8e4', marginLeft: 80 }} />}\n      ListEmptyComponent={<Text style={{ padding: 24, textAlign: 'center' }}>No hikes yet. Log your first one!</Text>}\n      contentContainerStyle={{ paddingBottom: 24 }}\n    />\n  );\n}
\n

Like ScrollView, a FlatList needs a bounded height, so its parent must give it flex: 1 (a screen in Expo Router already does). renderItem receives { item, index }. ListHeaderComponent and ListFooterComponent let a summary card or a “load more” spinner scroll with the list, instead of wrapping the FlatList in a ScrollView, which defeats virtualization entirely and triggers a warning.

\n

How virtualization works

\n

FlatList keeps a render window: the rows on screen plus a buffer above and below. As you scroll, rows entering the window mount and rows leaving it unmount, replaced by empty space of the right height.

\n
\n Of 600 hikes, only the rows on screen plus a buffer above and below are mounted; rows outside the window are replaced by blank space of the same height.\n \n rows 1–90: blank space\n \n buffer (mounted)\n \n visible rows\n \n buffer (mounted)\n rows 320–600: blank space\n \n phone screen\n viewport\n \n windowSize\n default 21 screens\n initialNumToRender\n default 10 rows\n
FlatList keeps only a window of rows mounted
\n

Two consequences follow. First, keys must be stable: FlatList and React use them to know which row is which as rows come and go, so use an id from your data. Array indexes break the moment you insert a new hike at the top. Second, rows forget local state when they unmount. An “expanded” flag kept in useState inside the row resets after a long scroll. Lift that state into the parent (expandedId) or into your data.

\n\n

Keeping it smooth

\n

Most list jank comes from re-rendering rows that didn’t change, or doing heavy work inside them. In order of payoff:

\n
    \n
  1. Memoize the row. Export HikeRow wrapped in memo, so a row re-renders only when its hike prop changes. (If your project enables the React Compiler, it memoizes for you.)
    2. \n
  2. Keep renderItem stable. An inline arrow function is fine with a memoized row, but don’t create new objects for props on every render, such as style={{…}} or hike={{ ...item }}, which defeat memo.
    3. \n
  3. No heavy work in rows. Format dates and compute stats once, when the data changes, not in every row’s render.
    4. \n
  4. Right-sized images. A 4000-pixel photo shrunk into a 56-point thumbnail costs memory for every visible row. Request thumbnails from your API, or use expo-image with caching.
    5. \n
  5. Fixed heights? Use getItemLayout. If every row is 72 points plus a 1-point separator, FlatList can skip measuring:
    6. \n
\n
TSX
const ROW = 73;\n\n<FlatList\n  // …\n  getItemLayout={(_, index) => ({ length: ROW, offset: ROW * index, index })}\n/>
\n

For logs that live on a server, don’t fetch all 600 hikes at once. onEndReached fires when the user scrolls near the bottom (how near is set by onEndReachedThreshold, measured in screen heights), which is the moment to request the next page and append it to data. Show a spinner in ListFooterComponent while it loads, and guard against firing the request twice.

\n

Tuning windowSize and initialNumToRender comes last, and only after you’ve measured. For very large or complex feeds, many teams switch to Shopify’s FlashList, which recycles row views instead of mounting new ones and keeps a FlatList-like API.

\n

SectionList: grouped data

\n

Trailhead groups hikes by month, with a sticky header for each. SectionList does that from data shaped like this:

\n
TypeScript
const sections = [\n  { title: 'October 2026', data: [ridgeLoop, lakeTrail] },\n  { title: 'September 2026', data: [oldMill] },\n];
\n
TSX
<SectionList\n  sections={sections}\n  keyExtractor={(hike) => hike.id}\n  renderItem={({ item }) => <HikeRow hike={item} />}\n  renderSectionHeader={({ section }) => <Text style={styles.header}>{section.title}</Text>}\n  stickySectionHeadersEnabled\n/>
\n

The interesting part isn’t the component; it’s turning a flat array of hikes into that sections shape, correctly sorted. That’s your exercise.

\n

Section 3 starts next: with real screens to move between, Trailhead needs navigation.

\n","toc":[{"id":"sec-1","text":"FlatList: render what’s visible","level":2},{"id":"sec-2","text":"How virtualization works","level":2},{"id":"sec-3","text":"Keeping it smooth","level":2},{"id":"sec-4","text":"SectionList: grouped data","level":2}],"takeaways":["ScrollView with .map() mounts every row at once; FlatList mounts only a window of rows around what’s visible.","Give FlatList a keyExtractor that returns a stable id from your data, never the array index.","Virtualized rows unmount when they scroll far away, so keep row state in your data, not inside the row component.","Memoize the row component, keep renderItem stable, and add getItemLayout when every row has the same height.","SectionList takes sections shaped as { title, data } and renders grouped lists with sticky headers."],"further":[{"title":"FlatList","url":"https://reactnative.dev/docs/flatlist"},{"title":"SectionList","url":"https://reactnative.dev/docs/sectionlist"},{"title":"Optimizing FlatList Configuration","url":"https://reactnative.dev/docs/optimizing-flatlist-configuration"}],"quiz":[{"q":"

Trailhead’s log has 600 hikes rendered with ScrollView and .map(). The screen takes three seconds to appear on an older Android phone. Why?

","options":[{"text":"ScrollView downloads every thumbnail before showing anything.","why":"Images load asynchronously either way. The cost is in creating 600 rows of native views up front."},{"text":"ScrollView is deprecated and runs in a compatibility mode.","why":"ScrollView isn’t deprecated; it’s the right choice for a screen of content. It’s the wrong choice for a long data list."},{"text":"ScrollView renders all 600 rows, with all their native views, before the first frame.","why":"Correct. FlatList would render roughly the first screenful, then fill in more as you scroll."}],"answer":2},{"q":"

Each hike row has a local useState for “expanded”. Users expand a row, scroll far down, scroll back, and it’s collapsed again. Why?

","options":[{"text":"FlatList unmounted the row when it left the render window, and its local state went with it.","why":"Correct. Virtualization unmounts distant rows. Keep expandedId in the parent or in your data and pass it down."},{"text":"The keyExtractor returns duplicate keys, so React reused the wrong row.","why":"Duplicate keys cause wrong rows to update, not state resets on scroll. React would also warn you."},{"text":"FlatList re-sorts the data whenever you scroll.","why":"FlatList never changes the order of your data. It only decides which rows to mount."}],"answer":0},{"q":"

Every Trailhead row is exactly 72 points tall. Which prop lets FlatList skip measuring rows and jump straight to row 400?

","options":[{"text":"initialNumToRender","why":"That controls how many rows render in the first batch; it doesn’t tell FlatList anything about their size."},{"text":"getItemLayout","why":"Correct. With length and offset known up front, FlatList doesn’t measure rows, and scrollToIndex works for rows that aren’t rendered yet."},{"text":"removeClippedSubviews","why":"That detaches off-screen views from the native hierarchy. It can save memory but says nothing about row sizes."},{"text":"windowSize","why":"That controls how many screens of rows stay mounted around the viewport, not how they’re measured."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\nconst hikes = [\n { id: 'h1', name: 'Ridge Loop', date: '2026-10-04', distanceKm: 8.4 },\n { id: 'h2', name: 'Old Mill Creek', date: '2026-09-12', distanceKm: 5.1 },\n { id: 'h3', name: 'Lake Trail', date: '2026-10-19', distanceKm: 11.2 },\n { id: 'h4', name: 'Eagle Point', date: '2025-10-02', distanceKm: 14.0 },\n { id: 'h5', name: 'Fern Gully', date: '2026-09-28', distanceKm: 3.6 },\n];\n\n// Return SectionList sections: [{ title: 'October 2026', data: [...] }, ...]\nfunction groupHikesByMonth(hikes) {\n const sections = {};\n for (const hike of hikes) {\n const month = MONTHS[Number(hike.date.slice(5, 7))];\n if (!sections[month]) sections[month] = [];\n sections[month].push(hike);\n }\n return Object.keys(sections).map((title) => ({ title, data: sections[title] }));\n}\n\nconsole.log(JSON.stringify(groupHikesByMonth(hikes), null, 2));\n"},"solution":{"js":"const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\nconst hikes = [\n { id: 'h1', name: 'Ridge Loop', date: '2026-10-04', distanceKm: 8.4 },\n { id: 'h2', name: 'Old Mill Creek', date: '2026-09-12', distanceKm: 5.1 },\n { id: 'h3', name: 'Lake Trail', date: '2026-10-19', distanceKm: 11.2 },\n { id: 'h4', name: 'Eagle Point', date: '2025-10-02', distanceKm: 14.0 },\n { id: 'h5', name: 'Fern Gully', date: '2026-09-28', distanceKm: 3.6 },\n];\n\nfunction groupHikesByMonth(hikes) {\n const sorted = [...hikes].sort((a, b) => b.date.localeCompare(a.date));\n const sections = [];\n for (const hike of sorted) {\n const year = hike.date.slice(0, 4);\n const month = MONTHS[Number(hike.date.slice(5, 7)) - 1];\n const title = `${month} ${year}`;\n const last = sections[sections.length - 1];\n if (last && last.title === title) last.data.push(hike);\n else sections.push({ title, data: [hike] });\n }\n return sections;\n}\n\nconsole.log(JSON.stringify(groupHikesByMonth(hikes), null, 2));\n"},"checks":[{"id":"titles","test":"const sample = [{ id: 'a', date: '2026-10-04' }, { id: 'b', date: '2026-09-12' }, { id: 'c', date: '2026-10-19' }, { id: 'd', date: '2025-10-02' }, { id: 'e', date: '2026-09-28' }]; const s = groupHikesByMonth(sample); return Array.isArray(s) && s.map((x) => x.title).join('|') === 'October 2026|September 2026|October 2025';"},{"id":"items-newest-first","test":"const sample = [{ id: 'a', date: '2026-10-04' }, { id: 'b', date: '2026-09-12' }, { id: 'c', date: '2026-10-19' }, { id: 'd', date: '2025-10-02' }, { id: 'e', date: '2026-09-28' }]; const s = groupHikesByMonth(sample); return s[0].data.map((h) => h.id).join() === 'c,a' && s[1].data.map((h) => h.id).join() === 'e,b' && s[2].data.map((h) => h.id).join() === 'd';"},{"id":"january-december","test":"const s = groupHikesByMonth([{ id: 'x', date: '2026-01-31' }, { id: 'y', date: '2025-12-01' }]); return s.length === 2 && s[0].title === 'January 2026' && s[1].title === 'December 2025';"},{"id":"no-mutation","test":"const sample = [{ id: 'a', date: '2026-10-04' }, { id: 'b', date: '2026-09-12' }, { id: 'c', date: '2026-10-19' }, { id: 'd', date: '2025-10-02' }, { id: 'e', date: '2026-09-28' }]; const ids = sample.map((h) => h.id).join(); groupHikesByMonth(sample); return sample.map((h) => h.id).join() === ids;"},{"id":"empty","test":"const s = groupHikesByMonth([]); return Array.isArray(s) && s.length === 0;"}],"title":"Group hikes into SectionList sections","prompt":"

Write groupHikesByMonth(hikes) so Trailhead’s SectionList can render the log grouped by month. Return an array of sections shaped { title, data } where:

\n\n

Dates are YYYY-MM-DD strings. The starter has several bugs; run it and compare its output with what the list needs.

\n","hints":["MONTHS is zero-based, but the month in '2026-10-04' is 10. And the title needs the year too.","If you sort a copy of the hikes newest first ([...hikes].sort((a, b) => b.date.localeCompare(a.date))), ISO date strings compare correctly as text.","After sorting, walk the hikes once: if the hike’s title matches the last section’s title, push into it; otherwise start a new section. The order of sections then falls out of the sort."],"explanation":"

The starter used the wrong month index (off by one), dropped the year so October 2025 merged into October 2026, and relied on object key order, which follows insertion rather than date. Sorting a copy first, then grouping consecutive hikes, solves ordering for both sections and items in one pass and leaves the caller’s array untouched. ISO YYYY-MM-DD strings sort chronologically as plain text, which avoids time-zone surprises from new Date(). Compute this when the data changes (for example in useMemo), not inside renderItem.

\n","checkLabels":{"titles":"Section titles include the year and are ordered newest month first","items-newest-first":"Hikes inside each section are ordered newest first","january-december":"January and December get the right month names","no-mutation":"The original hikes array keeps its order","empty":"An empty log gives an empty sections array"}},"words":676,"readMinutes":3}