import React from 'react';
import { Text, View } from 'react-native';
import { FlashList } from '@shopify/flash-list';
interface Product { id: string; name: string; }
const ProductList = ({ items }: { items: Product[] }) => {
return (
<FlashList
data={items}
renderItem={({ item }) => (
<View style={{ height: 80, padding: 10 }}>
<Text>{item.name}</Text>
</View>
)}
estimatedItemSize={80}
keyExtractor={(item) => item.id}
/>
);
};Am testat recent FlashList de la Shopify pe un telefon Android entry-level de acum 4 ani și diferențele de performanță m-au lăsat mască. Dacă te lovești de frame drops și ecrane albe pe dispozitivele mai ieftine, trecerea asta s-ar putea să fie cea mai simplă optimizare pe care o poți face. Hai să vedem cifrele concrete din Perf Monitor și unde stă de fapt șmecheria.
De unde a plecat totul
La un proiect recent cu vreo 12.000 de produse în catalog, aveam un feed cu infinite scroll. Pe iPhone-ul meu de development totul zbura, evident. Problema a apărut când am făcut QA pe un Xiaomi Redmi 9 (un telefon destul de comun prin România, cu un procesor destul de leneș).
Cu clasicul FlatList din React Native, când utilizatorul dădea scroll mai rapid, se întâmplau două chestii enervante. În primul rând, apăreau acele zone albe (blank areas) unde componentele nu apucau să se randeze. În al doilea rând, animațiile din UI începeau să agațe vizibil.
Am activat Perf Monitor-ul din developer menu ca să văd ce se întâmplă sub capotă. Rezultatele pe FlatList în timpul scroll-ului erau destul de rele:
- UI Thread: Scădea pe la 40-45 FPS în timpul scroll-ului rapid.
- JS Thread: Se prăbușea la 10-15 FPS. Aici era blocajul, JS-ul se chinuia să creeze și să distrugă sute de noduri de React în timp real.
Trecerea la FlashList și cifrele noi
Am înlocuit FlatList cu FlashList de la Shopify. Migrarea a durat literalmente 10 minute pentru că API-ul e aproape identic. Singura diferență majoră e că trebuie să-i dai un estimatedItemSize destul de realist.
După build-ul de release pe același Xiaomi obosit, am deschis iar Perf Monitor-ul:
- UI Thread: Constant la 59-60 FPS.
- JS Thread: Nu a scăzut niciodată sub 52 FPS, chiar și la cel mai agresiv scroll posibil.
Diferența e uriașă și se simte direct la mână, nu doar în grafice. Dispar complet ecranele albe, iar aplicația se simte fluidă.
Trade-off-urile pe care trebuie să le știi
Să fim sinceri, nicio librărie nu e magică fără să ceară ceva la schimb. FlashList folosește conceptul de reciclare a celulelor (mecanismul nativ din Android/iOS), spre deosebire de FlatList care doar montează și demontează componente în funcție de viewport.
Asta vine cu două probleme la care trebuie să fii atent:
- Stările interne ale componentelor: Dacă ai un state intern în item-ul listei (de exemplu, un checkbox
isExpanded), când celula se reciclează pentru un alt produs de mai jos, starea s-ar putea să rămână activă dacă nu o resetezi corect prin props. Totul trebuie condus de sus în jos (uncontrolled components în liste reciclate sunt o rețetă excelentă pentru bug-uri vizuale). - estimatedItemSize greșit: Dacă pui o valoare complet aiurea (de exemplu pui 50 și item-ul are de fapt 300px), o să ai layout shifts vizibile și performanța va scădea drastic pentru că FlashList va recalcula constant dimensiunile pe ecran.
Pentru liste simple sau carduri de produse cu înălțime relativ fixă, FlashList e sfânt. Pentru liste ultra-complexe, cu 10 tipuri diferite de celule dinamice și input-uri în ele, s-ar putea să transpiri puțin la debugging.
Voi ați trecut complet la FlashList în producție sau ați rămas pe FlatList-ul clasic de frică să nu vă lovească bug-urile de reciclare?