App Memory & Performance

Keep RAM use low and the UI smooth: virtualised lists, image sizing, leak prevention and profiling.

Performance problems are memory problems in disguise. Learn the few habits that prevent most of them.

Core concepts

  1. Virtualise lists: Render only visible rows with FlatList or FlashList and avoid ScrollView for long collections. — FlashList
  2. Images: Use expo-image with caching and request appropriately sized images. Full-resolution photos in thumbnails waste memory. — Expo Image
  3. Clean up effects: Remove listeners, timers and subscriptions in the effect cleanup function to prevent leaks and duplicate callbacks. — React docs
  4. Avoid wasted renders: Memoise expensive components, select store slices, and keep props stable. Use the profiler before optimising. — React Native performance
  5. Profile on real devices: Test on a mid-range Android phone, watch the JS and UI frame rates, and use platform profilers to find memory growth. — React Native debugging

Concept videos

YouTube channels and searches for these topics. On a large screen they open in the reading panel next to the roadmap.

Explanation

Measure first

Guessing at optimisations makes code harder to read for no gain. Profile, find the biggest cost, fix that.

Low-end device rule

If it is smooth on a cheap Android phone it will be smooth everywhere.

What Is It?

Performance work means keeping the app's CPU and memory use low enough to stay responsive.

Why Should I Care?

Slow or crashing apps get one-star reviews and uninstalls.

Real World Analogy

It is packing a backpack for a hike: only carry what you need now, and put the rest in the car.

Visual Mental Model

text
measure -> find hot spot -> fix one thing -> measure again

Smallest Possible Example

tsx
useEffect(() => {
  const sub = AppState.addEventListener('change', onChange);
  return () => sub.remove();
}, []);

Common Mistakes

❌ Optimising before measuring.

You may speed up code that never mattered.

❌ Forgetting effect cleanup.

Listeners pile up every time the screen mounts.

Build This Mini Project

Seed 5,000 rows, profile scroll on a mid-range Android phone, and fix the top two bottlenecks.

Prompts for Cursor, Claude Code & Codex

Paste these into Cursor, Claude Code, Codex, or any coding agent. Replace the bracketed parts with your app details, and keep the agent in plan mode first so you review the approach before it edits files.

Performance review

text
Review [screen] for performance: list virtualisation, image sizes, effect cleanup, unnecessary re-renders. Rank findings by likely impact, and fix only the top two with minimal changes.

Rules, databases & blogs to use

Resources

Related reads on iHateReading

Threads in the same domain as this chapter — go deeper on iHateReading without leaving the roadmap.

Vector search using vector embeddings cover

Vector search using vector embeddings

Embeddings, similarity search, and RAG-shaped memory for apps.

Agent harnessing: the part of building AI agents nobody talks about cover

Agent harnessing: the part of building AI agents nobody talks about

Loop, tools, memory, sandbox, and tracing live in your code — not the model weights.

Firebase, Supabase and Clerk authentication cover

Firebase, Supabase and Clerk authentication

Auth options for apps compared.