1) Measure what matters

• Startup: cold/warm time, JS bundle eval, first interactive screen.


• Interaction latency: tap-to-response, gesture latency, input delay.


• Rendering: dropped frames during scroll, animation jitter.


• Memory: steady-state usage, leaks on navigation loops.

Tools: Flipper (React DevTools & Perf), Android Perfetto/Systrace, iOS Instruments (Time Profiler, Allocations).

2) Faster startup

• Hermes: ensure Bytecode is shipped; disable dev features in release.


• Defer heavy work: move non-critical requires to import(); initialize SDKs after first render via InteractionManager.runAfterInteractions.


• Lazy screens: split navigation stacks and lazy-load deep screens.


• Splash discipline: lightweight native splash; avoid JS work before first paint.


• Reduce JS surface: delete dead modules, avoid polyfills you don’t need.

// Defer non-critical modules
useEffect(() => {
  let mounted = true;
  InteractionManager.runAfterInteractions(async () => {
    if (!mounted) return;
    const { initAnalytics } = await import("./analytics");
    initAnalytics();
  });
  return () => { mounted = false; };
}, []);

3) Rendering: fewer, cheaper re-renders

• Use React.memo for stable, pure row/components.


• Wrap callbacks in useCallback and derive props with useMemo.


• Lift state up; avoid passing new object/array literals each render.


• Normalize store selectors to avoid thrashy updates.

// Stable row with memo + keyExtractor
const Row = React.memo(({ item }) => {
  return (<View className="flex-row items-center py-3">
    <Text className="text-base">{item.title}</Text>
  </View>);
});
<FlatList
  data={data}
  keyExtractor={(it) => it.id}
  renderItem={({ item }) => <Row item={item} />}
/>

4) Lists: virtualization that feels native

Configure FlatList for your content physiology—don’t ship defaults blindly.

<FlatList
  data={feed}
  keyExtractor={(it) => it.id}
  renderItem={renderRow}
  initialNumToRender={10}
  windowSize={7}
  maxToRenderPerBatch={10}
  updateCellsBatchingPeriod={50}
  removeClippedSubviews
  getItemLayout={(data, index) => (
    { length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index }
  )}
/>

• Provide getItemLayout for fixed-height rows.


• Use removeClippedSubviews on long feeds.


• Avoid nested ScrollViews; prefer one virtualized list.

5) Animations: keep them off the JS thread

Use a native/UISide execution path (e.g., Reanimated worklets) for buttery 60fps when JS is busy.

// Example with Reanimated (pseudo)
const progress = useSharedValue(0);
useEffect(() => { progress.value = withTiming(1, { duration: 400 }); }, []);
const style = useAnimatedStyle(() => ({
  transform: [{ translateY: (1 - progress.value) * 20 }],
  opacity: progress.value,
}));
return <Animated.View style={style} />;

• Prefer transform/opacity over expensive layout properties.


• Coalesce animations; avoid overlapping layout thrash.

6) Images: right size, right time

• Serve appropriately sized assets; set explicit width/height to avoid layout shifts.


• Prefetch hero images during splash or previous screen transitions.


• Use an image component with caching; avoid re-decoding on scroll.

// Prefetch before showing a gallery
useEffect(() => {
  Image.prefetch(url);
}, [url]);

7) Memory: avoid slow leaks

• Unsubscribe timers, listeners, and event buses on unmount.


• Recycle large images; prefer thumbnails in feeds.


• Beware of retaining closures with big captured objects.


• Test navigation loops for growing memory—profile with Instruments/Perfetto.

8) Bridge & JSI: fewer crossings, bigger batches

• Batch interactions; avoid chatty per-frame bridge calls.


• Use JSI/TurboModules for high-frequency ops where available.


• Defer non-UI work to background threads in native modules.

// Pseudo: debounce chatty updates before crossing the boundary
const batchedSend = debounce((payloads) => NativeModule.send(payloads), 16);