Jak optimalizujete výkon aplikace React Native?

Question

Accepted Answer

Optimalizace výkonu React Native zahrnuje minimalizaci zbytečných **re-rendrů**, efektivní **seznamy**, snížení **práce JS-vlákna** a provozu na most, optimalizaci obrázků a využití nativního vlákna pro animace. Výkon je důležitý pro plynulé a citlivé aplikace.

## Minimalizace re-rendrů (klíčové React hledisku)

```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)
```

## Efektivní seznamy

```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
```

## JS vlákno a most

```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
```

## Další optimalizace

```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)
```

## Proč na tom záleží

Porozumění optimalizaci výkonu React Native je cenné znalostí na úrovni seniora, protože **plynulý výkon je nezbytný pro dobrou uživatelskou zkušenost** a React Native má specifické aspekty výkonu, proto je důležité pro vytváření kvalitních aplikací.

Jako v React pro web, klíčovým problémem je **minimalizace zbytečných re-rendrů** (pomocí React.memo, useMemo, useCallback, stabilních klíčů a správné struktury stavu, aby se komponenty nerendroval zbytečně) — časté problémy výkonu v aplikacích React Native. **Efektivní seznamy** jsou kritické: používání **FlatList** (ne ScrollView + map) pro dlouhé seznamy se správnou optimalizací (keyExtractor, getItemLayout, lehké memorizované položky komponent) a používání **FlashList** pro velmi rozsáhlé seznamy — protože seznamy jsou běžné a špatně renderované seznamy způsobují skutečné problémy výkonu.

Porozumění úvahám **JS-vlákna a mostu** je zvláště důležité a specifické pro React Native: **JS vlákno musí zůstat volné** pro odezvu (těžká synchronní práce způsobuje trhavý pohyb), **provoz na mostu** (ve staré architektuře) je drahý, takže komunikace JS↔nativní by měla být minimalizovaná (nová architektura/JSI to snižuje) a rozhodně **animace by měly běžet na nativním vlákně** (přes useNativeDriver/Reanimated, ne JS vlákno) pro plynulost — ty odrážejí jedinečnou architekturu React Native s JS/nativním vláknem a její důsledky na výkon.

Další optimalizace (optimalizace obrázků s cachováním, snížení velikosti při spuštění/balíčku, používání Hermes, profilování pro nalezení úzkých míst a testování na zařízeních nižší třídy) doplňují sadu nástrojů.

Plynulý výkon přímo ovlivňuje UX a architektura React Native zavádí specifické úvahy (JS vlákno, most, nativní animace) nad rámec obecné optimalizace React.

Protože je plynulý výkon nezbytný pro UX a React Native má specifické aspekty výkonu (re-rendry, efektivní seznamy, JS vlákno/most, nativní animace) a protože správná optimalizace těchto aspektů udržuje aplikace plynulé, je porozumění optimalizaci výkonu React Native cenné znalostmi na úrovni seniora pro vytváření reaktivních, vyleštěných aplikací — klíčová dovednost odrážející jak optimalizaci React (re-rendry, seznamy), tak specifické aspekty React Native (JS vlákno, most, nativní animace), důležitá pro povědomí o výkonu očekávané od seniorních vývojářů React Native.