Bạn tối ưu hiệu năng ứng dụng React Native như thế nào?

Question

Accepted Answer

Tối ưu hiệu năng React Native bao gồm giảm thiểu **re-render** không cần thiết, **list** hiệu quả, giảm **công việc JS-thread** và lưu lượng bridge, tối ưu hình ảnh, và dùng native thread cho animation. Hiệu năng là quan trọng cho app mượt mà, phản hồi nhanh.

## Giảm thiểu re-render (một mối quan tâm React then chốt)

```text
✓ Tránh RE-RENDER không cần thiết:
  → React.memo (memoize component), useMemo (giá trị), useCallback (hàm)
  → KEY đúng, ổn định trong list; tránh tạo object/hàm mới inline gây ra việc
    component con re-render
  → cấu trúc state hợp lý (đừng nhét mọi thứ vào một state lớn khiến re-render tất cả)
```

## List hiệu quả

```text
✓ Dùng FLATLIST (không phải ScrollView + map) cho list dài — render lazily/virtualization
✓ Tối ưu FlatList: keyExtractor, getItemLayout, windowSize, removeClippedSubviews;
  giữ component item nhẹ và được memoize
✓ Cho list rất lớn/phức tạp → FlashList (Shopify) — một lựa chọn thay thế nhanh hơn, drop-in
```

## JS thread và bridge

```text
✓ JS thread chạy code của bạn — giữ nó rảnh để phản hồi tốt (tránh công việc đồng bộ nặng;
  nó gây giật/rớt frame)
✓ Giảm thiểu lưu lượng BRIDGE (kiến trúc cũ) — các lần truyền JS↔native thường xuyên tốn kém
  (KIẾN TRÚC MỚI / JSI giảm điều này)
✓ Chạy ANIMATION trên native thread (useNativeDriver / Reanimated) — không phải JS thread
✓ Đẩy tính toán nặng ra ngoài; debounce các thao tác đắt đỏ
```

## Các tối ưu khác

```text
✓ Tối ưu HÌNH ẢNH (kích thước, cache — ví dụ FastImage); lazy-load
✓ Giảm thời gian khởi động app và kích thước bundle; dùng Hermes (engine JS tối ưu)
✓ PROFILE để tìm bottleneck (Flipper, performance monitor, React DevTools profiler)
✓ Test trên thiết bị cấu hình thấp (không chỉ thiết bị cao cấp)
```

## Tại sao điều này quan trọng

Hiểu tối ưu hiệu năng React Native là kiến thức cấp senior có giá trị vì **hiệu năng mượt mà là thiết yếu cho trải nghiệm người dùng tốt**, và React Native có các cân nhắc hiệu năng cụ thể, nên nó quan trọng để xây dựng app chất lượng.

Như React cho web, một mối quan tâm then chốt là **giảm thiểu re-render không cần thiết** (dùng React.memo, useMemo, useCallback, key ổn định, và cấu trúc state hợp lý để tránh re-render component một cách không cần thiết) — một vấn đề hiệu năng phổ biến trong app React Native. **List hiệu quả** là cốt yếu: dùng **FlatList** (không phải ScrollView + map) cho list dài với tối ưu đúng (keyExtractor, getItemLayout, component item nhẹ được memoize), và dùng **FlashList** cho list rất lớn — vì list là phổ biến và những list được render kém gây ra vấn đề hiệu năng thực sự.

Hiểu các cân nhắc **JS-thread và bridge** đặc biệt quan trọng và đặc thù cho React Native: **JS thread phải luôn rảnh** để phản hồi nhanh (công việc đồng bộ nặng gây giật), **lưu lượng bridge** (trong kiến trúc cũ) tốn kém nên giao tiếp JS↔native nên được giảm thiểu (kiến trúc mới/JSI giảm điều này), và cực kỳ quan trọng là **animation nên chạy trên native thread** (qua useNativeDriver/Reanimated, không phải JS thread) để mượt mà — những điều này phản ánh kiến trúc threading JS/native độc đáo của React Native và các hệ quả hiệu năng của nó.

Các tối ưu khác (tối ưu hình ảnh với cache, giảm thời gian khởi động/kích thước bundle, dùng Hermes, profile để tìm bottleneck, và test trên thiết bị cấu hình thấp) hoàn thiện bộ công cụ.

Hiệu năng mượt mà ảnh hưởng trực tiếp đến UX, và kiến trúc của React Native đưa ra các cân nhắc cụ thể (JS thread, bridge, animation native-thread) vượt ra ngoài tối ưu React tổng quát.

Vì hiệu năng mượt mà là thiết yếu cho UX và React Native có các cân nhắc hiệu năng cụ thể (re-render, list hiệu quả, JS thread/bridge, animation native-thread), và vì tối ưu đúng đắn giải quyết những điều này giữ app mượt mà, hiểu tối ưu hiệu năng React Native là kiến thức cấp senior có giá trị để xây dựng app phản hồi nhanh, chỉn chu — một kỹ năng then chốt phản ánh cả tối ưu React (re-render, list) và các mối quan tâm đặc thù React Native (JS thread, bridge, animation native), quan trọng cho nhận thức về hiệu năng được kỳ vọng ở lập trình viên React Native senior.