Module 08 — Performance Optimization

&127919; MỤC TIÊU HỌC TẬP

• Hiểu mô hình threading trong React Native: JS Thread, Main/UI Thread, Shadow Thread
• Biết cách ngăn re-render không cần thiết bằng React.memo, useCallback, useMemo
• Tối ưu hóa FlatList với các prop quan trọng và biết khi nào dùng FlashList
• Hiểu Hermes engine: AOT vs JIT, tại sao cải thiện startup time
• Tối ưu hóa image loading với FastImage, resize, caching strategies
• Sử dụng InteractionManager.runAfterInteractions để defer heavy tasks
• Nhận diện và fix 6 loại memory leak phổ biến
• Phân tích bundle size và áp dụng tree shaking
• Phân biệt cold start vs warm start, tối ưu app startup
• Sử dụng profiling tools: Flipper, React DevTools Profiler, Systrace

&128214; HƯỚNG DẪN HỌC

🧭 Vòng lặp học module này

&128218; LÝ THUYẾT CHI TIẾT

1. Threading Model trong React Native

Ví dụ flow khi user nhấn button:

User tap (UI Thread)
  → Event serialize to JSON (Bridge)
    → JS Thread nhận event, xử lý handler
      → setState() → tính Virtual DOM diff
        → Gửi layout instructions qua Bridge
          → Shadow Thread tính Yoga layout
            → UI Thread render native views

2. Re-render Optimization

React.memo

Wrap component bằng React.memo để skip re-render khi props không đổi (shallow comparison).

const UserCard = React.memo(function UserCard({ name, avatar }: Props) {
  return (
    <View>
      <Image source={{ uri: avatar }} />
      <Text>{name}</Text>
    </View>
  );
});

Component UserCard chỉ re-render khi name hoặc avatar thật sự thay đổi. Nếu parent re-render nhưng truyền cùng props, UserCard sẽ skip.

useCallback

Memoize function reference để tránh tạo function mới mỗi render. Kết hợp với React.memo mới có ý nghĩa.

const Parent = () => {
  const [count, setCount] = useState(0);

  const handlePress = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return <Child onPress={handlePress} />;
};

const Child = React.memo(({ onPress }: { onPress: () => void }) => {
  return <Button onPress={onPress} title="Increment" />;
});

Nếu không dùng useCallback, mỗi lần Parent render sẽ tạo handlePress mới → Child luôn re-render dù đã memo.

useMemo

Memoize kết quả tính toán nặng. Chỉ tính lại khi dependencies thay đổi.

const filteredData = useMemo(() => {
  return largeDataset.filter(item =>
    item.name.toLowerCase().includes(searchTerm.toLowerCase())
  );
}, [largeDataset, searchTerm]);

Nếu largeDataset có 50,000 items, filter mỗi render sẽ rất tốn CPU. useMemo cache kết quả cho đến khi searchTerm hoặc largeDataset thay đổi.

3. FlatList Optimization

Ví dụ FlatList tối ưu cho list cố định chiều cao:

const ITEM_HEIGHT = 72;

const getItemLayout = (_: any, index: number) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  getItemLayout={getItemLayout}
  initialNumToRender={8}
  maxToRenderPerBatch={5}
  windowSize={11}
  removeClippedSubviews={true}
/>

FlashList — Drop-in replacement

import { FlashList } from "@shopify/flash-list";

<FlashList
  data={data}
  renderItem={({ item }) => <UserCard user={item} />}
  estimatedItemSize={72}
  keyExtractor={item => item.id}
/>

estimatedItemSize là prop bắt buộc — FlashList dùng giá trị này để ước lượng scroll position. Không cần getItemLayout vì FlashList tự đo dynamic heights.

4. Hermes Engine

AOT (Ahead-of-Time) vs JIT (Just-in-Time)

Kiểm tra Hermes đang bật chưa:

const isHermes = () => !!global.HermesInternal;

console.log("Using Hermes:", isHermes());

5. Image Optimization

react-native-fast-image

Dựa trên SDWebImage (iOS) và Glide (Android) — 2 thư viện native image loading tốt nhất. So với <Image> mặc định:

• Aggressive caching: Disk cache + memory cache, configurable priority
• Preloading: Download trước khi hiển thị
• Priority levels: low, normal, high
• Auth headers: Hỗ trợ auth cho private images

import FastImage from "react-native-fast-image";

<FastImage
  style={{ width: 200, height: 200 }}
  source={{
    uri: "https://example.com/photo.jpg",
    priority: FastImage.priority.high,
    cache: FastImage.cacheControl.immutable,
  }}
  resizeMode={FastImage.resizeMode.cover}
/>

Best Practices cho Image

• Resize server-side: Yêu cầu backend trả ảnh đúng kích thước cần hiển thị. Đừng load ảnh 4K rồi resize bằng CSS.
• Dùng WebP format: Nhỏ hơn JPEG 25-35% ở cùng chất lượng.
• Progressive loading: Hiển thị thumbnail/blur trước, load full-res sau.
• Limit concurrent downloads: Tránh load 50 ảnh cùng lúc, gây network congestion.

6. InteractionManager.runAfterInteractions

import { InteractionManager } from "react-native";

useEffect(() => {
  const task = InteractionManager.runAfterInteractions(() => {
    fetchHeavyData();
    processExpensiveComputation();
  });

  return () => task.cancel();
}, []);

Flow: Navigate → Animation chạy mượt → Animation xong → runAfterInteractions callback được gọi → Heavy task chạy. User thấy transition mượt, sau đó data mới load.

7. Memory Leaks — 6 Loại Phổ Biến

Ví dụ fix leak #1 và #3:

useEffect(() => {
  const controller = new AbortController();

  const intervalId = setInterval(() => {
    fetch("/api/status", { signal: controller.signal })
      .then(res => res.json())
      .then(data => setStatus(data))
      .catch(() => {});
  }, 5000);

  return () => {
    clearInterval(intervalId);
    controller.abort();
  };
}, []);

Cleanup function trong useEffect chạy khi component unmount. AbortController cancel pending fetch, clearInterval dừng timer.

8. Bundle Size Optimization

react-native-bundle-visualizer

Công cụ visualize bundle — cho thấy mỗi dependency chiếm bao nhiêu % trong bundle.

npx react-native-bundle-visualizer

Output: treemap interactives hiển thị size của từng module. Từ đó xác định thư viện nào quá nặng cần thay thế hoặc lazy load.

Các kỹ thuật giảm bundle size

• Tree shaking: Import chính xác function cần dùng thay vì import cả thư viện.

import { format } from "date-fns/format";

import { debounce } from "lodash/debounce";

Thay vì import { format } from "date-fns" hoặc import _ from "lodash" sẽ kéo toàn bộ thư viện vào bundle.

• Lazy loading với React.lazy + Suspense: Load screen/component chỉ khi cần.
• Thay thư viện nặng: moment.js (300KB) → date-fns (tree-shakeable) hoặc dayjs (2KB).
• RAM Bundles (Inline Requires): Chỉ load module khi thật sự cần, giảm startup cost.
• ProGuard/R8 (Android): Minify + shrink native code.

9. App Startup Optimization

Tối ưu Cold Start

1. Enable Hermes: Giảm 30-50% parse time nhờ bytecode precompile.
2. Splash Screen: Dùng react-native-bootsplash hoặc expo-splash-screen để hiển thị splash ngay lập tức (native level), ẩn khi JS bundle ready.
3. Inline Requires: Lazy load modules — chỉ require khi function đầu tiên gọi đến.
4. Reduce initial screen complexity: Screen đầu tiên render càng ít component càng tốt.
5. Defer non-critical initialization: Analytics, crash reporting, push notifications — init sau khi first frame render.

import { BootSplash } from "react-native-bootsplash";

const App = () => {
  useEffect(() => {
    const init = async () => {
      await loadEssentialData();
      await BootSplash.hide({ fade: true });

      InteractionManager.runAfterInteractions(() => {
        initAnalytics();
        initCrashReporting();
        registerPushNotifications();
      });
    };

    init();
  }, []);

  return <Navigation />;
};

Flow: Native splash hiện ngay → JS bundle load → essential data ready → hide splash với fade → defer analytics/crash/push sau khi animation xong.

10. Profiling Tools

&10067; CÂU HỎI PHỎNG VẤN + ĐÁP ÁN

🛠️ Debug playbook: performance bug

&127947; BÀI TẬP

&128187; MINI EXERCISE THỰC TẾ REACT NATIVE

&9888; LỖI THƯỜNG GẶP

&127970; CASE ĐI LÀM THẬT

&129504; GHI NHỚ NHANH

&10067; CÂU HỎI TỰ KIỂM TRA

&10003; CHECKLIST TỰ ĐÁNH GIÁ

&128206; TÀI NGUYÊN