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

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.