Copy of deck

EM@

NIKHIL SONI

Love to talk about react native and how things work under the hood.

@nikhilsoni

Where It Started

some heading if requried

The Challenge

• Product Detail Page (PDP): heavy, complex, memory-intensive

• Users navigate rapidly between multiple screens

• Mysterious native crashes in production

• Stack traces showing only memory addresses (unreadable)

• Unable to pinpoint root causes—total blind spot

#1: Memory Accumulation

Stack Grow | Memory Increased

More Image | Memory increased

The Discovery

• User navigates rapidly: PDP → PDP → PDP → ...

• Each screen has large JSON payloads + heavy components

• Navigation stack grows unbounded

• Memory spikes with each new screen

• Eventually: Out-Of-Memory crash 💥

Solution : Partial Unmounting Strategy

Smart Memory Management

• Allow navigation stack to grow freely (preserve UX)

• Keep only top 10 screens fully mounted

• Older screens: unmount (release views & hooks)

• Unmount images when not visible (critical for memory)

• Retain screen data in memory for instant remount

Code: Partial Unmounting + Image Cleanup

const MAX_MOUNTED = 10;
const screenCache = useRef({});

useEffect(() => {
  const routes = navigation.getState().routes;
  if (routes.length > MAX_MOUNTED) {
    const toUnmount = routes[MAX_MOUNTED - 1];
    screenCache.current[toUnmount.key] = {
      data: screenState,
      scrollPos: scrollPosition
    };
    // Cleanup: unmount images not visible
    images.forEach(img => {
      if (!isVisible(img)) {
        ImageCache.removeImage(img.uri);
      }
    });
    navigation.setParams({ unmount: true });
  }
}, [navigation.getState()]);

Results

• 5x more PDP screens before hitting limits

• Memory warnings dropped 85% in Datadog

• Number of view after one point become constant

File Size	2MB	2MB
Resolution	100x100	200x200

File Size	2MB	8MB
Resolution	100x100	100x100