Caching in ReactNative apps — Boon or Bane?

Nobody likes a sluggish app. Users expect instant responses — whether they’re scrolling, tapping, or buying their next dream car. A slow app? That’s a one-way ticket to frustration and the uninstall button. But there’s a secret weapon to keep your app fast, efficient, and buttery smooth: Caching!

55% of the users will blame the mobile app for the performance issues, no matter the actual cause; while 37% of the users who experience a mobile app that crashed or froze will think less of the company that made the app

What are the key challenges for app performance

Not all users have access to high-speed WiFi or unlimited 5G. Many depend on unstable connections and data plans with strict limits (specially in developing countries). Additionally, mobile devices have limited processing power, making every optimisation crucial. Here’s what you’re dealing with

• Network Latency: Fetching data from servers takes time, especially on slow networks. In turn making the application slow and thus impacting user experience.
• Battery Drain: Excessive API calls and processing can be a battery killer.
• Data Costs: A data-hungry app might send users running for cheaper alternatives. You certainly do not want that!
• App Freezes & Crashes: Poor performance equals bad user experience (and bad reviews!).

Caching to the rescue

What is Caching?

Imagine you’re ordering a pizza from your favourite restaurant. The first time you call, you provide your address, favourite toppings, and crust preference. It takes 30 minutes to get your pizza. Now, what if you call again tomorrow and order the same pizza? Instead of asking for all your details again, the restaurant remembers (caches) your information, making the process faster. This is caching — storing frequently used data so that it can be retrieved quickly without reprocessing the request.

Why Caching is a Game-changer

• Lower data consumption: Caching allows apps to function better in lower network or unstable network conditions by serving locally stored data instead of making repeated API calls.
• Faster loading time & Smoother, more responsive UI: Apps that load instantly and provide smooth navigation retain users better. Studies show that a 1-second delay in load time can lead to a 7% drop in conversions [A metric that is used for web but we can assume the same here as user responsiveness is similar].
• Boosts battery efficiency: Frequent API requests and image loads can drain a device’s battery quickly. Caching reduces network calls and CPU usage, leading to a more energy-efficient application.

Determining what to cache depends on your app’s needs. There is no universal answer; it must be tailored to your specific use case. If your app is image-heavy, prioritising an image caching strategy is crucial. On the other hand, if your app relies on multiple API calls at launch (5 to 10 or more), you should strongly consider caching API responses using libraries like react-query or WatermelonDB. These tools ensure efficient data handling, reducing load times and enhancing user experience while avoiding stale data issues. Touching point on few strategies that I commonly use as a practice.

1. Caching Images

Images are one of the most commonly cached assets in apps. Imagine you’re browsing a car showroom’s online catalog. If you had to download high-quality car images every time you opened the app, it would be slow and waste internet data. Instead, your phone caches (saves) these images so that the next time you visit, they load instantly.

Using an efficient caching library like react-native-fast-image ensures that car images load instantly without repeated downloads, giving you a smooth user experience.

// ForDevelopers
import FastImage from 'react-native-fast-image';

const CachedImage = ({ uri }) => {
  return (
    <FastImage
      style={{ width: 100, height: 100 }}
      source={{ uri }}
      resizeMode={FastImage.resizeMode.cover}
    />
  );
};

FastImage provides different caching modes such as immutable, web, and cacheOnly, allowing developers to optimise caching behaviour based on their needs. Choosing the right cache control ensures minimal redundant network requests while keeping images up-to-date.

In conjunction with this, invest in a good CDN that dynamically serves optimised images tailored to the device’s resolution and screen density, reducing load times and bandwidth usage eg: Akamai, CacheFly, cloudflare, fastly etc.

2. Caching API Responses

Imagine a pizza delivery app where the server acts like an overly enthusiastic waiter who keeps running to the kitchen every five seconds yelling, “Any new orders?!” The chefs are overwhelmed, orders are delayed, and chaos ensues. Now, introduce caching — it’s like giving the waiter a notepad where they jot down the last known orders, so they can just glance at it instead of sprinting back and forth. Meanwhile, in the background, the app quietly checks for updates without disturbing the already stressed-out digital kitchen.

Latest libs like react-query make this process effortless, ensuring fast load times and keeping the users (and the kitchen) happy.

// ForDevelopers
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import axios from 'axios';

const queryClient = new QueryClient();
const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};
const Posts = () => {
  const { data, error, isLoading } = useQuery('posts', fetchPosts, {
    staleTime: 1000 * 60 * 5, // Cache API data for 5 minutes
    cacheTime: 1000 * 60 * 10, // Data stays in cache for 10 minutes
  });
  if (isLoading) return <Text>Loading...</Text>;
  if (error) return <Text>Error fetching posts</Text>;
  return data.map(post => <Text key={post.id}>{post.title}</Text>);
};
const App = () => (
  <QueryClientProvider client={queryClient}>
    <Posts />
  </QueryClientProvider>
);

You can also try out SWR(Stale-While-Revalidate) which is a data-fetching library that provides a simple and efficient caching mechanism. It follows a strategy where it first returns cached (stale) data, then fetches the latest data in the background (revalidate), and finally updates the UI when fresh data arrives.

// ForDevelopers
import useSWR, { mutate } from 'swr';

const { data, error } = useSWR('https://api.example.com/cars', fetcher, {
  refreshInterval: 5000, // Fetch new data every 5 seconds
});

// Update cache without re-fetching
mutate('https://api.example.com/cars', [...data, newCar], false);

// Offline first approach - Show last available data if offline
const { data, error } = useSWR('https://api.example.com/cars', fetcher, {
  fallbackData: cachedData, 
});

3. Caching Database Queries

React Native apps using local databases (e.g., SQLite, WatermelonDB, or MMKV) can optimize query performance by leveraging in-memory caching, indexing, and background synchronisation. WatermelonDB, for example, ensures offline-first functionality with real-time sync capabilities, while MMKV provides ultra-fast key-value storage for frequently accessed data, enhancing app responsiveness.

// ForDevelopers
import { Database } from '@nozbe/watermelondb';
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';
import schema from './model/schema';
import Post from './model/Post';

const adapter = new SQLiteAdapter({ schema });
const database = new Database({ adapter, modelClasses: [Post] });

const fetchPosts = async () => {
  const posts = await database.get('posts').query().fetch();
  return posts;
};
// ForDevelopers
import SQLite from 'react-native-sqlite-storage';

const db = SQLite.openDatabase({ name: 'mydb.db', location: 'default' });

const getCachedData = (query, params = []) => {
  return new Promise((resolve, reject) => {
    db.transaction((tx) => {
      tx.executeSql(query, params, (_, results) => resolve(results.rows.raw()), reject);
    });
  });
};

4. Caching UI Elements

Dynamic UI components such as lists and grids should use virtualisation techniques to minimise rendering overhead. React Native provides hooks like useMemo useCallback and React.memo which assists in setting up caching of UI.

// ForDevelopers
const renderItem = useCallback(({item}) => (
   <View key={item.key}>
      <Text>{item.title}</Text>
   </View>
 ), []);

return (
  <FlatList data={items} renderItem={renderItem} />;
);
// ForDevelopers
import React, {memo} from 'react';
import {View, Text} from 'react-native';

const MyListItem = memo(
  ({title}: {title: string}) => (
    <View>
      <Text>{title}</Text>
    </View>
  ),
  (prevProps, nextProps) => {
    return prevProps.title === nextProps.title;
  },
);

export default MyListItem;

Best Practices for Effective Caching

Something that worked for me in these past years

1. Define a Caching Strategy — Identify critical resources and define clear expiration rules. [Some samples shared above]
2. Use Appropriate Storage Mechanisms — Choose between in-memory caching, local databases, or disk storage based on data type and usage
3. Implement Cache Invalidation — Regularly refresh stale data using proper eviction policies such as LRU (Least Recently Used)
4. Monitor — Use analytics to track cache hit/miss ratios and adjust cache policies accordingly. You can use tools like Sentry / bugsnag / rollbar / embrace etc.
5. Ensure Security — Avoid caching sensitive user data or encrypt cache storage to prevent leaks. Use keychain / keystore / EncryptedSharedPreferences to store sensitive data.

Conclusion

Caching is both a boon and a bane. When implemented wisely, it can be a game-changer, significantly enhancing app performance and user experience. However, if mismanaged, it can lead to outdated data, memory bloat, and unexpected bugs, ultimately degrading the app’s reliability.

By following best practices and continuously optimising caching mechanisms, you can strike the right balance between performance and reliability, delivering a seamless experience to users.

So, is caching a boon or a bane? The answer lies in how you use it!