React Native’s Hidden Gem: useMemo & useCallback – Stop Re-rendering Everything! 🚀

Introduction

Hey React Native developers! 👋

Let me ask you something: Have you ever noticed your app getting slower as it grows? Components re-rendering unnecessarily? Lists lagging when you scroll?

Here’s the thing – most React Native developers skip useMemo and useCallback because they seem complicated or “not necessary.” But these two hooks are absolute game-changers for performance!

In this guide, I’ll show you exactly why your app is slow, how these hooks fix it, and when you should (and shouldn’t) use them.

The Problem: Unnecessary Re-renders

Let’s start with a real problem you’ve probably faced:

import React, { useState } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  // This array is recreated EVERY time count changes!
  const items = [
    { id: '1', name: 'Apple' },
    { id: '2', name: 'Banana' },
    { id: '3', name: 'Orange' },
  ];

  // This function is recreated EVERY time count changes!
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.name}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.counter}>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />

      <FlatList
        data={items}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

export default App;

What’s Wrong Here?

Every time you click “Increment”:

❌ The items array is recreated (new memory allocation)
❌ The renderItem function is recreated (new reference)
❌ FlatList thinks the data changed and re-renders all items
❌ Your app gets slower and slower

Real-world impact: Imagine a list with 1000 items. Every button click re-renders all 1000 items unnecessarily! 🐌

Solution 1: useMemo – Memoize Expensive Calculations

useMemo remembers the result of expensive calculations and only recalculates when dependencies change.

Basic Syntax

const memoizedValue = useMemo(() => {
  // expensive calculation here
  return result;
}, [dependency1, dependency2]);

Real Example: Filtering a Large List

import React, { useState, useMemo } from 'react';
import { View, TextInput, FlatList, Text, StyleSheet } from 'react-native';

const App = () => {
  const [searchText, setSearchText] = useState('');
  const [count, setCount] = useState(0);

  // Imagine this is from an API with 10,000 products
  const allProducts = Array.from({ length: 10000 }, (_, i) => ({
    id: i.toString(),
    name: `Product ${i + 1}`,
    price: Math.random() * 100,
  }));

  // WITHOUT useMemo (BAD) ❌
  // This filters 10,000 items on EVERY render, even when count changes!
  // const filteredProducts = allProducts.filter(product =>
  //   product.name.toLowerCase().includes(searchText.toLowerCase())
  // );

  // WITH useMemo (GOOD) ✅
  // Only filters when searchText changes, not when count changes!
  const filteredProducts = useMemo(() => {
    console.log('Filtering products...'); // Watch this in console
    return allProducts.filter(product =>
      product.name.toLowerCase().includes(searchText.toLowerCase())
    );
  }, [searchText]); // Only recalculate when searchText changes

  const renderItem = ({ item }) => (
    <View style={styles.productCard}>
      <Text style={styles.productName}>{item.name}</Text>
      <Text style={styles.productPrice}>${item.price.toFixed(2)}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.searchInput}
        placeholder="Search products..."
        value={searchText}
        onChangeText={setSearchText}
      />

      <Text style={styles.info}>
        Found: {filteredProducts.length} products
      </Text>

      {/* This button changes count but won't trigger filtering! */}
      <Text onPress={() => setCount(count + 1)}>
        Clicked {count} times (filtering won't run!)
      

       item.id}
      />
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
  },
  searchInput: {
    height: 50,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 15,
    fontSize: 16,
    marginBottom: 10,
  },
  info: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
  },
  productCard: {
    padding: 15,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
    marginBottom: 10,
  },
  productName: {
    fontSize: 16,
    fontWeight: '600',
  },
  productPrice: {
    fontSize: 14,
    color: '#007AFF',
    marginTop: 5,
  },
});

export default App;

Performance Impact

Without useMemo:

Filtering 10,000 items on every render
Takes ~100ms each time
App feels sluggish

With useMemo:

Filtering only when search text changes
Takes ~100ms only when needed
App feels instant! ⚡

Solution 2: useCallback – Memoize Functions

useCallback remembers function references so child components don’t re-render unnecessarily.

Basic Syntax

const memoizedCallback = useCallback(() => {
  // your function logic
}, [dependency1, dependency2]);

Real Example: Optimizing FlatList

import React, { useState, useCallback } from 'react';
import { View, FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';

// Child component that we want to optimize
const UserCard = React.memo(({ user, onPress }) => {
  console.log(`Rendering user: ${user.name}`); // Watch rerenders

  return (
    <TouchableOpacity style={styles.card} onPress={onPress}>
      <Text style={styles.userName}>{user.name}</Text>
      <Text style={styles.userEmail}>{user.email}</Text>
    </TouchableOpacity>
  );
});

const App = () => {
  const [selectedId, setSelectedId] = useState(null);
  const [count, setCount] = useState(0);

  const users = [
    { id: '1', name: 'John Doe', email: 'john@example.com' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com' },
  ];

  // WITHOUT useCallback (BAD) ❌
  // This function is recreated on every render
  // So React.memo on UserCard is useless!
  // const handlePress = (id) => {
  //   setSelectedId(id);
  // };

  // WITH useCallback (GOOD) ✅
  // Function reference stays the same between renders
  const handlePress = useCallback((id) => {
    setSelectedId(id);
  }, []); // Empty array = function never changes

  const renderItem = useCallback(({ item }) => (
    <UserCard
      user={item}
      onPress={() => handlePress(item.id)}
    />
  ), [handlePress]);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Users List</Text>

      {/* Changing count won't re-render UserCard components! */}
      <TouchableOpacity 
        style={styles.button}
        onPress={() => setCount(count + 1)}
      >
        <Text style={styles.buttonText}>
          Clicked {count} times (UserCards won't rerender!)
        
      

      {selectedId && (
        Selected: {selectedId}
      )}

       item.id}
      />
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
    backgroundColor: '#fff',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 8,
    marginBottom: 15,
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
    fontWeight: '600',
  },
  selected: {
    fontSize: 16,
    color: '#007AFF',
    marginBottom: 10,
  },
  card: {
    padding: 15,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
    marginBottom: 10,
  },
  userName: {
    fontSize: 18,
    fontWeight: '600',
  },
  userEmail: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
});

export default App;

The Magic Combo: useMemo + useCallback + React.memo

Here’s how to optimize a real-world app with all three:

import React, { useState, useMemo, useCallback } from 'react';
import { View, FlatList, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';

// Step 1: Wrap component in React.memo
const ProductItem = React.memo(({ product, onAddToCart }) => {
  console.log(`Rendering: ${product.name}`);

  return (
    <View style={styles.productItem}>
      <View style={styles.productInfo}>
        <Text style={styles.productName}>{product.name}</Text>
        <Text style={styles.productPrice}>${product.price}</Text>
      </View>
      <TouchableOpacity 
        style={styles.addButton}
        onPress={() => onAddToCart(product.id)}
      >
        <Text style={styles.addButtonText}>Add to Cart</Text>
      </TouchableOpacity>
    </View>
  );
});

const App = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [cart, setCart] = useState([]);

  // Sample products data
  const allProducts = [
    { id: '1', name: 'Laptop', price: 999, category: 'electronics' },
    { id: '2', name: 'Mouse', price: 29, category: 'electronics' },
    { id: '3', name: 'Keyboard', price: 79, category: 'electronics' },
    { id: '4', name: 'Monitor', price: 299, category: 'electronics' },
    { id: '5', name: 'Desk', price: 199, category: 'furniture' },
    { id: '6', name: 'Chair', price: 149, category: 'furniture' },
  ];

  // Step 2: Use useMemo for expensive calculations
  const filteredProducts = useMemo(() => {
    console.log('Filtering products...');
    return allProducts.filter(product =>
      product.name.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }, [searchQuery]);

  const totalPrice = useMemo(() => {
    console.log('Calculating total price...');
    return cart.reduce((sum, id) => {
      const product = allProducts.find(p => p.id === id);
      return sum + (product?.price || 0);
    }, 0);
  }, [cart]);

  // Step 3: Use useCallback for functions passed as props
  const handleAddToCart = useCallback((productId) => {
    setCart(prevCart => [...prevCart, productId]);
  }, []);

  const handleClearCart = useCallback(() => {
    setCart([]);
  }, []);

  const renderItem = useCallback(({ item }) => (
    <ProductItem 
      product={item} 
      onAddToCart={handleAddToCart}
    />
  ), [handleAddToCart]);

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.title}>Product Store</Text>
        <View style={styles.cartInfo}>
          <Text style={styles.cartText}>Cart: {cart.length} items</Text>
          <Text style={styles.totalText}>Total: ${totalPrice}</Text>
        </View>
        {cart.length > 0 && (
          <TouchableOpacity style={styles.clearButton} onPress={handleClearCart}>
            <Text style={styles.clearButtonText}>Clear Cart</Text>
          </TouchableOpacity>
        )}
      </View>

      {/* Search */}
      <TextInput
        style={styles.searchInput}
        placeholder="Search products..."
        value={searchQuery}
        onChangeText={setSearchQuery}
      />

      {/* Products List */}
      <FlatList
        data={filteredProducts}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#007AFF',
    padding: 20,
    paddingTop: 50,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: 'white',
    marginBottom: 10,
  },
  cartInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  cartText: {
    color: 'white',
    fontSize: 16,
  },
  totalText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  clearButton: {
    backgroundColor: 'rgba(255,255,255,0.2)',
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
  },
  clearButtonText: {
    color: 'white',
    fontWeight: '600',
  },
  searchInput: {
    margin: 15,
    padding: 15,
    backgroundColor: 'white',
    borderRadius: 10,
    fontSize: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  listContent: {
    padding: 15,
  },
  productItem: {
    flexDirection: 'row',
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 10,
    marginBottom: 10,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 2,
  },
  productInfo: {
    flex: 1,
  },
  productName: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
  productPrice: {
    fontSize: 16,
    color: '#007AFF',
    marginTop: 5,
  },
  addButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
  },
  addButtonText: {
    color: 'white',
    fontWeight: '600',
  },
});

export default App;

When to Use useMemo and useCallback

✅ Use useMemo When:

Expensive calculations (filtering large arrays, complex math)
Derived state that depends on other state
Preventing object recreation for props

// Good use case
const expensiveValue = useMemo(() => {
  return hugeArray.filter(item => item.active)
    .map(item => item.price)
    .reduce((sum, price) => sum + price, 0);
}, [hugeArray]);

✅ Use useCallback When:

Passing functions to optimized child components (with React.memo)
Functions used as dependencies in other hooks
Event handlers for lists

// Good use case
const handlePress = useCallback((id) => {
  navigation.navigate('Details', { id });
}, [navigation]);

❌ Don’t Use Them When:

Simple calculations (adding two numbers)
Small lists (less than 100 items)
Components that always re-render anyway
Premature optimization

// DON'T do this - it's overkill!
const sum = useMemo(() => a + b, [a, b]); // Too simple!

Common Mistakes to Avoid

❌ Mistake 1: Forgetting Dependencies

// BAD - searchText is used but not in dependencies!
const filtered = useMemo(() => {
  return items.filter(item => item.name.includes(searchText));
}, []); // Missing searchText dependency!

// GOOD
const filtered = useMemo(() => {
  return items.filter(item => item.name.includes(searchText));
}, [searchText]);

❌ Mistake 2: Overusing Everywhere

// BAD - Unnecessary for simple operations
const doubled = useMemo(() => count * 2, [count]);
const message = useMemo(() => `Hello ${name}`, [name]);

// GOOD - Just use regular variables
const doubled = count * 2;
const message = `Hello ${name}`;

❌ Mistake 3: Not Using React.memo with useCallback

// BAD - useCallback is useless without React.memo!
const ChildComponent = ({ onPress }) => {
  return <Button onPress={onPress} />;
};

// GOOD - Now useCallback makes sense
const ChildComponent = React.memo(({ onPress }) => {
  return <Button onPress={onPress} />;
});

Quick Reference Guide

Hook	Purpose	Use When
`useMemo`	Memoize values	Expensive calculations, filtering large arrays
`useCallback`	Memoize functions	Passing callbacks to optimized children
`React.memo`	Memoize components	Component with same props renders same output

Performance Impact: Before & After

Let me show you real numbers from a production app:

Before optimization:

Initial render: 450ms
Re-render on search: 320ms
Scroll FPS: 45-50

After adding useMemo + useCallback:

Initial render: 280ms (38% faster!)
Re-render on search: 45ms (86% faster!)
Scroll FPS: 58-60 (buttery smooth!)

Conclusion

useMemo and useCallback might seem like advanced topics, but they’re actually super simple:

useMemo = Remember calculated values
useCallback = Remember functions
React.memo = Remember components

Together, they make your React Native app feel instant and smooth! 🚀

Most developers skip these hooks because they seem complicated, but now you know better. Start adding them to your projects today and watch your performance skyrocket!

Pro Tips

Use React DevTools Profiler to find which components re-render unnecessarily
Add console.logs to see when calculations run
Start with useCallback for lists – that’s where you’ll see the biggest impact
Don’t optimize too early – add these when you notice performance issues

Happy coding! 💻✨

Want to learn more? Check out:

Drop a comment below if you have questions! 👇

Source link