How do you profile and fix performance problems?

Performance work starts with a reproducible scenario and a measurement. A screen that feels slow may be doing too much JavaScript, dropping frames on the UI thread, waiting on the network, or mounting too many views. Each has a different fix.

Tools by layer

• React DevTools Profiler: which components rendered, why, and how long they took
• React Native performance monitor: JS and UI frame rates
• Android Studio profiler and Xcode Instruments: CPU, memory and native traces
• Systrace or Perfetto: thread scheduling and frame deadlines
• Custom marks with performance.now or console.time for specific flows

import { memo, useCallback } from "react";
import { Pressable, Text } from "react-native";

type Props = { id: string; label: string; onSelect: (id: string) => void };

export const Row = memo(function Row({ id, label, onSelect }: Props) {
  const handlePress = useCallback(() => onSelect(id), [id, onSelect]);
  return (
    <Pressable onPress={handlePress}>
      <Text>{label}</Text>
    </Pressable>
  );
});

A useful diagnostic is whether frames drop when JavaScript is busy. If the UI stutters during an animation while the JS thread is idle, the problem is on the UI thread or in layout. If it stutters when state updates, look at render cost and unnecessary re-renders. Do not memoise blindly; wrapping everything adds comparison cost and complexity without fixing layout or native work.