React NativeQuy tắc giống React web nhưng stake cao hơn vì re-render trong RN tốn hơn (bridge/UIView update).
useCallback ổn định reference của function giữa các render. Cần khi:
1. Truyền callback vào React.memo component → tránh unmemoize.
2. Truyền vào FlatList props (renderItem, keyExtractor, onEndReached) — nếu function mới mỗi render, FlatList re-render hết items visible.
3. Dùng làm dependency của useEffect — function mới mỗi render gây effect chạy lại liên tục.
useMemo cache giá trị tính toán đắt:
1. Filter/sort/transform array lớn (>1000 items).
2. Tạo object/array làm prop cho React.memo component.
3. Compute style object phức tạp.
Khi nào KHÔNG cần:
- Function/value dùng nội bộ component, không pass cho memoized child → useCallback/useMemo cũng tốn memory để cache.
- Compute primitive đơn giản (x * 2, string concat ngắn) — overhead memo lớn hơn lợi ích.
Cảnh báo: useCallback không "ngăn re-render" của component cha — nó chỉ ổn định reference. Component cha vẫn re-render khi state nó đổi; chỉ child bọc React.memo mới hưởng lợi.
Same rules as React on the web, but the stakes are higher in RN because re-renders cost more (bridge/UIView updates).
useCallback stabilizes a function reference across renders. Needed when:
1. Passing a callback to a React.memo component → otherwise memoization breaks.
2. Passing into FlatList props (renderItem, keyExtractor, onEndReached) — a fresh function every render forces FlatList to re-render visible items.
3. Used as a useEffect dependency — a fresh function every render triggers the effect repeatedly.
useMemo caches an expensive computation:
1. Filter/sort/transform of large arrays (>1,000 items).
2. Building an object/array prop for a React.memo component.
3. Computing a complex style object.
When NOT needed:
- A function/value used only internally in the component and not passed to a memoized child — useCallback/useMemo also cost memory to cache.
- Cheap primitive math (x * 2, short string concat) — memo overhead beats the gain.
Warning: useCallback does not "prevent re-renders" of the parent — it only stabilizes the reference. The parent still re-renders when its own state changes; only React.memo children benefit.