🚀 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.