Come ottimizzi le prestazioni di un'app React Native?

Question

Accepted Answer

L'ottimizzazione delle prestazioni di React Native implica minimizzare i **re-render** non necessari, utilizzare **liste** efficienti, ridurre il **lavoro del thread JS** e il traffico del bridge, ottimizzare le immagini e utilizzare il thread nativo per le animazioni. Le prestazioni sono importanti per app fluide e reattive.

## Minimizzare i re-render (una preoccupazione chiave di React)

```text
✓ Avoid unnecessary RE-RENDERS:
  → React.memo (memoize components), useMemo (values), useCallback (functions)
  → correct, stable KEYS in lists; avoid creating new objects/functions inline that
    cause children to re-render
  → proper state structure (don't put everything in one big state that re-renders all)
```

## Liste efficienti

```text
✓ Use FLATLIST (not ScrollView + map) for long lists — lazy rendering/virtualization
✓ Optimize FlatList: keyExtractor, getItemLayout, windowSize, removeClippedSubviews;
  keep item components light and memoized
✓ For very large/complex lists → FlashList (Shopify) — a faster drop-in alternative
```

## Thread JS e bridge

```text
✓ The JS thread runs your code — keep it free for responsiveness (avoid heavy synchronous
  work; it causes jank/dropped frames)
✓ Minimize BRIDGE traffic (old architecture) — frequent JS↔native passes are costly
  (the NEW ARCHITECTURE / JSI reduces this)
✓ Run ANIMATIONS on the native thread (useNativeDriver / Reanimated) — not the JS thread
✓ Offload heavy computation; debounce expensive operations
```

## Altre ottimizzazioni

```text
✓ Optimize IMAGES (sizes, caching — e.g. FastImage); lazy-load
✓ Reduce app startup time and bundle size; use Hermes (optimized JS engine)
✓ PROFILE to find bottlenecks (Flipper, performance monitor, React DevTools profiler)
✓ Test on lower-end devices (not just high-end)
```

## Perché è importante

Comprendere l'ottimizzazione delle prestazioni di React Native è una conoscenza preziosa a livello senior perché **le prestazioni fluide sono essenziali per una buona esperienza utente**, e React Native ha considerazioni di prestazioni specifiche, quindi è importante per costruire app di qualità.

Come React per il web, una preoccupazione chiave è **minimizzare i re-render non necessari** (utilizzando React.memo, useMemo, useCallback, chiavi stabili e una struttura di stato appropriata per evitare di eseguire re-render dei componenti inutilmente) — un problema di prestazioni comune nelle app React Native. Le **liste efficienti** sono critiche: utilizzare **FlatList** (non ScrollView + map) per liste lunghe con l'ottimizzazione appropriata (keyExtractor, getItemLayout, componenti di elemento memoizzati leggeri), e utilizzare **FlashList** per liste molto grandi — poiché le liste sono comuni e quelle mal renderizzate causano veri problemi di prestazioni.

Comprendere le considerazioni del **thread JS e del bridge** è particolarmente importante e specifico di React Native: il **thread JS deve rimanere libero** per la reattività (il lavoro sincrono pesante causa jank), il **traffico del bridge** (nell'architettura vecchia) è costoso quindi la comunicazione JS↔nativa dovrebbe essere minimizzata (la nuova architettura/JSI riduce questo), e crucialmente le **animazioni dovrebbero girare sul thread nativo** (tramite useNativeDriver/Reanimated, non sul thread JS) per fluidità — questi riflettono l'architettura unica JS/nativa di React Native e le sue implicazioni sulle prestazioni.

Altri ottimizzamenti (ottimizzazione delle immagini con caching, riduzione della dimensione di startup/bundle, utilizzo di Hermes, profiling per trovare colli di bottiglia, e test su dispositivi di fascia bassa) completano il toolkit.

Le prestazioni fluide influiscono direttamente sull'UX, e l'architettura di React Native introduce considerazioni specifiche (thread JS, bridge, animazioni su thread nativo) al di là dell'ottimizzazione React generale.

Poiché le prestazioni fluide sono essenziali per l'UX e React Native ha considerazioni di prestazioni specifiche (re-render, liste efficienti, il thread JS/bridge, animazioni su thread nativo), e poiché un'ottimizzazione appropriata che affronta questi aspetti mantiene le app fluide, comprendere l'ottimizzazione delle prestazioni di React Native è una conoscenza preziosa a livello senior per costruire app reattive e raffinate — un'abilità chiave che riflette sia l'ottimizzazione React (re-render, liste) che le preoccupazioni specifiche di React Native (thread JS, bridge, animazioni native), importante per la consapevolezza delle prestazioni prevista dai developer React Native senior.