🚀 Fixing Slow React Native Screens: A Simple Trick That Works

Melby Thomas — Tue, 09 Dec 2025 14:26:25 +0000

If your React Native screen takes too long to render—especially when loading lists or heavy UI elements—the problem is often unnecessary re-renders.
Here’s a quick fix that improves performance with almost zero effort.

✅ Use `React.memo` + `useCallback`

When you have reusable components inside FlatList or ScrollView, React will re-render them even if props haven't changed.
Wrapping them with React.memo prevents that.

Example:

// Heavy UI Component
const ItemCard = React.memo(({ item, onPress }) => {
  return (
    <TouchableOpacity onPress={() => onPress(item)}>
      <Text>{item.name}</Text>
    </TouchableOpacity>
  );
});

Now use useCallback to avoid generating a new function each render:

const MyScreen = () => {
  const [data, setData] = useState([]);

  const handlePress = useCallback((item) => {
    console.log("Clicked:", item);
  }, []);

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <ItemCard item={item} onPress={handlePress} />
      )}
    />
  );
};

💡 Why This Works

React.memo stops re-rendering when props don’t change
useCallback ensures your functions are stable
Together they reduce wasted renders and improve FPS

This trick alone can make screens feel instantly smoother—especially in chat apps, dashboards, or e-commerce product lists.

Final Tip

If you’re using large lists, combine this with:

windowSize
initialNumToRender
removeClippedSubviews

for even better performance.

Forem: Melby Thomas

🚀 Fixing Slow React Native Screens: A Simple Trick That Works

✅ Use React.memo + useCallback

Example:

💡 Why This Works

Final Tip

✅ Use `React.memo` + `useCallback`