Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

View sourceExpoReact NativePerformanceMotion

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
title
Use a List Virtualizer for Any List
impact
HIGH
impactDescription
reduced memory, faster mounts
tags
lists, performance, virtualization, scrollview

Use a List Virtualizer for Any List

Use a list virtualizer like LegendList or FlashList instead of ScrollView with mapped children—even for short lists. Virtualizers only render visible items, reducing memory usage and mount time. ScrollView renders all children upfront, which gets expensive quickly.

Incorrect (ScrollView renders all items at once):

tsx
function Feed({ items }: { items: Item[] }) {  return (    <ScrollView>      {items.map((item) => (        <ItemCard key={item.id} item={item} />      ))}    </ScrollView>  )}// 50 items = 50 components mounted, even if only 10 visible

Correct (virtualizer renders only visible items):

tsx
import { LegendList } from '@legendapp/list'
function Feed({ items }: { items: Item[] }) {  return (    <LegendList      data={items}      // if you aren't using React Compiler, wrap these with useCallback      renderItem={({ item }) => <ItemCard item={item} />}      keyExtractor={(item) => item.id}      estimatedItemSize={80}    />  )}// Only ~10-15 visible items mounted at a time

Alternative (FlashList):

tsx
import { FlashList } from '@shopify/flash-list'
function Feed({ items }: { items: Item[] }) {  return (    <FlashList      data={items}      // if you aren't using React Compiler, wrap these with useCallback      renderItem={({ item }) => <ItemCard item={item} />}      keyExtractor={(item) => item.id}    />  )}

Benefits apply to any screen with scrollable content—profiles, settings, feeds, search results. Default to virtualization.