FlashList v2 v React Native 2026: Migrace z FlatList, výkon a 120 FPS bez jitteru

Aktualizováno: 20. září 2026

FlashList v2 je přepsaný list komponent od Shopify, který v roce 2026 nahrazuje FlatList jako výchozí volbu pro dlouhé seznamy v React Native. V mých testech na Pixelu 8 a iPhonu 15 udržel stabilních 118 až 120 FPS při rychlém skrolování 5 000 řádků, zatímco FlatList s identickými daty spadl na medián 42 FPS a dropoval každý čtvrtý snímek. Popravdě, tenhle rozdíl mě dost zaskočil. V2 už nepotřebuje estimatedItemSize, spoléhá výhradně na novou architekturu React Native (Fabric) a dodává recyklační pool, který v profilech Perfetta vidím pracovat pod 0,4 ms na řádek.

• FlashList v2 (stable od května 2026) je postavený výhradně pro novou architekturu. Fabric a Bridgeless mode jsou tvrdý požadavek.
• Prop estimatedItemSize byl v v2 odstraněn; velikost buněk se měří přes nativní autosizing s cache.
• V benchmarcích na Androidu vidím 2,3× vyšší medián FPS a 71 % méně dropped frames oproti FlatList na 5 000 položkách.
• Polymorfní feedy vyžadují správně napsaný getItemType. Bez něj recyklační pool trhá views a JS thread se ucpe.
• Reanimated 4 a Skia 2 fungují uvnitř FlashList v2 nativně; není třeba CellRendererComponent hack.
• Masonry layout je nyní součástí hlavního balíčku, ne samostatné komponenty.

Co je FlashList v2 a proč jej v roce 2026 řešit

Takže, pojďme rovnou k věci. FlashList v2 je kompletně přepsaný list od Shopify, který nahrazuje původní implementaci postavenou nad RecyclerListView. Verze 2.0 vyšla stable v květnu 2026 a poprvé závisí výhradně na nové architektuře React Native (Fabric renderer, Bridgeless mode a JSI přímé volání). Cíl je jasný: dostat listy s tisíci řádky na stabilních 120 Hz na moderních Android i iOS zařízeních a přitom neprodloužit dobu, kdy uživatel čeká na první snímek po otevření obrazovky.

Ve své praxi mobile performance engineera pravidelně vidím, že 70 až 80 % pomalých obrazovek v React Native aplikacích má pomalý list jako hlavního viníka. Profil Perfetto z reálné aplikace ukazuje charakteristický vzorec: dlouhé bloky ScrollView.onScroll nad 16 ms následované JavaScriptovými výpočty _measureLayout u FlatList. FlashList v2 tento vzorec eliminuje tím, že měření probíhá na hlavním nativním vlákně přes Fabric shadow tree a JavaScriptovému běhu předá jen ID recyklovaného view.

Pokud píšete nový feed, katalog produktů, konverzační obrazovku, nebo migrujete legacy obrazovku, která si stěžuje na jitter, je v roce 2026 defaultní volbou právě FlashList v2. Nikoli FlatList a ani třetí strany typu Recyclerlistview či Legend List.

FlashList v2 vs FlatList: benchmark, metriky, trace

Než začneme s kódem, ukážu čísla ze svého laboratorního běhu. Test: seznam 5 000 karet o výšce ~110 dp s obrázkem, dvěma řádky textu a badge; rychlé skrolování gestem swipe-and-flick na 2000 px/s po dobu 12 sekund; sledování přes Perfetto (Android 14, Pixel 8) a Instruments Time Profiler (iOS 17, iPhone 15). Chtěl jsem mít podmínky co nejblíž reálné aplikaci, kterou jsem v posledních měsících ladil.

Metrika	FlatList (0.76)	FlashList v2
Medián FPS (Android)	42	118
P95 doba snímku (ms)	34	9,1
Dropped frames za 12 s	217	63
JS thread busy %	78 %	22 %
Špička RSS paměti (MB)	412	168
Doba do prvního snímku (ms)	640	210
Velikost recyklovaných views	N/A	18 (Android) / 14 (iOS)

Ve stopě Perfetta je rozdíl jasný. FlatList každých ~34 ms exekvuje blok UIManager.measureInWindow v JavaScriptu, který blokuje layout tick. FlashList v2 tuto práci provádí v fabric::ShadowTree::commit nativně a JS thread používá jen pro dodání nové položky do recyklačního poolu (~0,4 ms).

Jedna nečekaná pointa. Špička paměti klesla o 59 %. Důvod je recyklační pool s pevnou velikostí, v2 nedrží všechny materializované řádky v paměti, ale pracuje s poolem 14 až 18 views a přemapovává je při skrolu. To vidíte i v článku o debugování React Native přes DevTools a Hermes Profiler, kde jsem popsal, jak přes Memory tab tento pool detekovat.

Klíčové změny mezi FlashList v1 a v2

Migrace z v1 na v2 není triviální. Shopify zveřejnil breaking changes guide pro FlashList v2 a doporučuji ho číst řádek po řádku. Nejdůležitější body:

• Odstraněný estimatedItemSize. V2 měří velikosti přes nativní autosizing s IntersectionObserverem na Fabric shadow tree. Pokud jste v v1 skript propočítávali průměrnou výšku, můžete tu logiku smazat.
• Povinná nová architektura. Pokud stále běžíte na starém bridge, FlashList v2 nenabootuje. Komponenta vyhodí runtime warning a fallbackne na ScrollView. Doporučuji nejdřív dokončit přechod podle mého článku o nové architektuře React Native, Fabric a TurboModules.
• Změněný onLoad callback. Nyní se volá po dokončení prvního layout commitu, ne po prvním renderu. Časy TTI, které jste měřili, budou po migraci vyšší o ~40 až 80 ms, protože měření je přesnější.
• Přejmenovaný onBlankArea na onEmptyArea. Pouze rename, ale ESLint plugin @shopify/flash-list/eslint-plugin ho automaticky přejmenuje.
• Recyklační pool je konfigurovatelný. Nový prop recyclerPoolSize defaultně nastavený na 20. Pro polymorfní listy s více typy zvyšte na 30 až 40.
• Podpora Reanimated 4 přímo. Není třeba wrappovat CellRendererComponent; animace uvnitř řádků fungují out of the box (viz článek o Reanimated 4 a 120 FPS animacích).

Jak migrovat z FlatList na FlashList v2 krok za krokem

Následuje minimální migrace, kterou jsem provedl v jednom produkčním e-shopu s katalogem 12 000 SKU. Doba: 40 minut na jednu obrazovku, přínos: 2,8× vyšší FPS ve stopě Perfetta. Upřímně řečeno, čekal jsem víc bolesti.

Instalace balíčku

npm install @shopify/flash-list@^2.0.0
cd ios && pod install && cd ..

Zaměnění komponenty

// Před: FlatList z react-native
import { FlatList } from 'react-native';

<FlatList
  data={products}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ProductCard product={item} />}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}
/>

// Po: FlashList v2
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={products}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ProductCard product={item} />}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}
  recyclerPoolSize={30}
/>

Přidání getItemType pro heterogenní feed

Pokud list obsahuje více typů řádků (např. karta produktu, banner, reklama), musí každý typ recyklovat vlastní pool. Bez toho FlashList přemapuje banner na kartu a znovu vykreslí komponentu, v profilu vidíte spike na 24 ms. Tuhle chybu jsem sám udělal v prvním projektu s v2 a hodinu jsem se divil, kde se ten skok bere.

<FlashList
  data={feed}
  getItemType={(item) => item.kind} // 'product' | 'banner' | 'ad'
  renderItem={({ item }) => {
    switch (item.kind) {
      case 'product': return <ProductCard product={item} />;
      case 'banner':  return <Banner banner={item} />;
      case 'ad':      return <AdSlot ad={item} />;
    }
  }}
  recyclerPoolSize={40}
/>

Odstranění staré optimalizační logiky

Po migraci smažte propíky, které v v2 nedělají nic: estimatedItemSize, estimatedListSize, initialNumToRender, maxToRenderPerBatch, windowSize a removeClippedSubviews. Všechny byly součástí FlatList heuristik a FlashList v2 je ignoruje. Nechání staré konfigurace není chyba, ale je to zbytečný noise.

Jak optimalizovat výkon FlashList: getItemType a recyklace

Samotná záměna komponenty vám dá 60 až 70 % zisku. Zbylých 30 % vytáhnete jen tehdy, když správně rozumíte recyklačnímu poolu. Pool je pole nativních views drženo mimo obrazovku; když řádek opustí viewport, pool ho převezme, nový datový bod se namapuje a view se přesune zpět. Cíl je nikdy nevytvářet nový view po prvním layoutu.

Stabilní keyExtractor

V mém nejčastějším nálezu vývojáři píšou keyExtractor={(_, i) => i.toString()}. Tím říkáte FlashListu, že index řádku je klíč. Jenže při přidání položky nahoru se všechny klíče posunou a pool zahodí všechny recyklované views. Používejte stabilní ID z API. Vážně.

Konzistentní typy přes getItemType

Každý unikátní typ řádku dostane svůj vlastní podpool. Pokud vracíte getItemType náhodně (např. Math.random(), což jsem viděl v produkci), pool se roztříští a recyklace přestane fungovat.

Memoizovaný renderItem

const renderItem = useCallback(({ item }) => (
  <ProductCard product={item} />
), []);

// A samotná karta:
const ProductCard = memo(({ product }) => {
  return (
    <Pressable onPress={() => navigate(product)}>
      <Image source={{ uri: product.image }} />
      <Text>{product.name}</Text>
    </Pressable>
  );
});

Velikost obrázků

Recyklovaný view si drží nativní Image instanci. Když do ní nacpete 4K JPEG, dekódování běží při každé recyklaci a JS thread stojí na ImageIO Bridgi. Vždy servírujte obrázky ve velikosti, ve které se vykreslí (např. přes Cloudinary parametr w_360). Přineslo to v jednom projektu -47 % dropped frames. Nic dramatického na kódu, jen správně nastavená URL.

Masonry, horizontální listy a sticky headers

FlashList v2 sjednotil dřív oddělené komponenty MasonryFlashList a horizontální variantu pod jednu API. Používáte propy masonry, numColumns a horizontal.

Masonry (Pinterest-style grid)

<FlashList
  data={photos}
  masonry
  numColumns={2}
  optimizeItemArrangement
  getItemType={(item) => item.aspectRatio > 1 ? 'wide' : 'tall'}
  renderItem={({ item }) => (
    <Image
      source={{ uri: item.url }}
      style={{ aspectRatio: item.aspectRatio }}
    />
  )}
/>

Prop optimizeItemArrangement aktivuje interní algoritmus, který doplňuje sloupce tak, aby jejich výšky byly co nejvyrovnanější (rozdíl typicky pod 40 dp). U 800 fotek jsem viděl zisk 12 FPS oproti naivnímu masonry.

Horizontální list

<FlashList
  horizontal
  data={categories}
  renderItem={({ item }) => <CategoryChip cat={item} />}
  showsHorizontalScrollIndicator={false}
/>

Pro chipboardy nebo carousel snížíte recyclerPoolSize na 6 až 8, protože na obrazovku se vejde méně řádků a větší pool jen zbytečně drží paměť.

Sticky headers

V2 podporuje stickyHeaderIndices stejným způsobem jako SectionList, ale bez performance penalty. Kombinujte s getItemType='header', aby recyklační pool držel headery odděleně.

Integrace s Reanimated 4 a novou architekturou

Jeden z nejčastějších důvodů, proč jsem v v1 viděl trhaní, byl Animated.event volaný v onScroll každého řádku. V2 tento vzorec eliminuje díky přímé integraci s Reanimated 4 worklet runtime.

import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
import { FlashList } from '@shopify/flash-list';

const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);

function Feed() {
  const scrollY = useSharedValue(0);
  const onScroll = useAnimatedScrollHandler((e) => {
    scrollY.value = e.contentOffset.y;
  });
  return (
    <AnimatedFlashList
      data={items}
      onScroll={onScroll}
      renderItem={({ item }) => <Row item={item} scrollY={scrollY} />}
    />
  );
}

Worklet handler běží na UI threadu, JavaScript vlákno o offsetu nic neví a nezpomaluje. V mém benchmarku parallax hlavičky s obrázkem 400×200 tento vzorec držel 120 FPS i při skrolování s 60 řádky viditelnými najednou.

Profilování: React Native DevTools a Perfetto traces

Bez měření nemá smysl nic optimalizovat. Můj pracovní postup:

1. Zapnu React Native DevTools (Cmd+D, pak Open DevTools) a nahraji trace 15sekundového skrolu přes Performance tab.
2. Na Androidu spustím Perfetto přes adb shell perfetto -c /data/local/tmp/config.pbtx se surface_flinger a scheduler kategoriemi. Zajímá mě medián Choreographer#doFrame.
3. Na iOS použiju Instruments s Time Profiler a Core Animation šablonou. Sleduju hodnotu Frame rate v FPS Gauge.
4. V DevTools sleduju v Components tabu, které řádky přerenderovaly. Cíl: nulové renderů mimo viewport.

Časté pasti a jak se jim vyhnout

Během auditů jsem opakovaně narazil na následující nálezy. Všechny zpomalují FlashList v2 tak, že si lidé myslí, že „FlashList není lepší". Ve skutečnosti je konfigurace špatná.

Inline funkce v renderItem

Každý render vytvoří novou instanci funkce, React ji nemůže porovnat referenčně a paměťová hygiena poolu se rozpadne. Řešení: useCallback nebo funkce mimo komponentu.

Neomezená velikost položek

Pokud řádek roste dynamicky (např. text s numberOfLines zrušeným po tap), pool má potíže. Každá recyklace znamená přeměření. V2 to zvládne, ale za cenu ~8 ms navíc na řádek. Když je to možné, držte výšku konstantní přes maxHeight nebo fixed layout.

Volání setState v onViewableItemsChanged

Callback se volá 30 až 120× za sekundu při rychlém skrolu. Každý setState re-rendruje list. Přesuňte state do Reanimated shared value nebo Zustand storu s selektorem, který se přihlásí jen na konkrétní ID.

Nesprávný overrideItemLayout

Pokud znáte přesnou výšku (např. z API metadata), použijte overrideItemLayout; pool přeskočí měření a rovnou přiřadí velikost. Nesprávná hodnota však vede k překryvům a chybějícím řádkům. Nastavujte jen tehdy, když máte 100% jistotu.

Ignorování drawDistance

V2 zavedl prop drawDistance (default 250 dp). Zvýšení na 500 dp posílí prewarm cache, ale zdvojnásobí velikost aktivního poolu. Doporučuji držet default, dokud vám metriky nedovolí říct opak.

Časté otázky

Jaký je rozdíl mezi FlashList a FlatList?

FlatList materializuje každý řádek jako samostatné view a udržuje virtualizační okno v JavaScriptu, zatímco FlashList udržuje pevný recyklační pool nativních views a mapuje na ně data. Výsledek: FlashList má typicky 2 až 3× vyšší FPS a 40 až 60 % nižší spotřebu paměti u dlouhých seznamů.

Je FlashList opravdu rychlejší než FlatList?

Ano, v praxi měřím medián 118 FPS proti 42 FPS na Pixelu 8 s 5 000 položkami. Zisk je největší u dlouhých heterogenních listů s obrázky. U krátkých listů (do ~30 položek) je rozdíl zanedbatelný a stačí FlatList.

Potřebuje FlashList v2 estimatedItemSize?

Ne. Prop estimatedItemSize byl v v2 odstraněn. Velikosti se měří nativně přes Fabric shadow tree s autosizing cache, nemusíte průměrnou výšku počítat ručně.

Funguje FlashList s novou architekturou React Native?

FlashList v2 vyžaduje novou architekturu (Fabric a Bridgeless mode) jako tvrdý požadavek. Ve staré architektuře nenabootuje a fallbackne na ScrollView s warningem. Před migrací je třeba dokončit přechod na Fabric.

Jak migrovat velký feed s reklamami a bannery na FlashList?

Klíčem je správný getItemType, který vrátí konzistentní řetězec pro každý typ řádku (produkt, banner, reklama, header). Recyklační pool udrží každý typ zvlášť a jeho velikost zvýšíte propem recyclerPoolSize (30 až 40 pro heterogenní feedy).