WhoBuilt

Master JavaScript Performance in React Native

Apr 23, 2025· 1 h 0 min· 3.5K views·Watch on YouTube

Speaker

SzymonJavaScript section lead and author for The Ultimate Guide to React Native Optimization at Callstack

Szymon, a Callstack engineer who led and authored much of the JavaScript section of its React Native optimization guide, presents practical performance techniques with a Callstack host.

Why performance matters

Szymon connects delays in app startup and response time to lost users and revenue. He says the session will focus on JavaScript performance, where teams can have a large impact and often make avoidable mistakes.

Stabilize context and list rendering

A context provider that creates a new value object on every render can trigger renders across its consumers, even when the values are unchanged. Szymon recommends memoizing the value with `useMemo`; in one audited app, he found this issue six times. For FlatList, an inline `renderItem` changes identity on each parent render, so wrapping it in `useCallback` can avoid unnecessary item renders.

Measure synchronous work and reuse formatters

JavaScript runs one task at a time, so expensive work can delay user interactions. In a date-formatting example, recreating `DateTimeFormat` for each item took about 20 to 23 milliseconds, while creating it once and reusing it took about 5 milliseconds. Szymon advises profiling first and applying memoization where measurements show a meaningful benefit.

Keep heavy work responsive with yielding

A workflow editor became sluggish because changing one node triggered synchronous validation of the whole workflow, causing about half a second of delay between keystrokes on some devices. Szymon demonstrates splitting divisible work into smaller tasks and yielding between them so JavaScript can handle user events. Wrapping synchronous computation in a promise does not make that computation run in the background.

Takeaways

  • Memoize context values when consumers should not update for unrelated provider renders.
  • Keep FlatList's `renderItem` stable, and consider selecting data per row to limit updates.
  • Reuse expensive objects such as `DateTimeFormat` instead of recreating them during each render.
  • Profile on representative devices before adding memoization broadly.
  • Split long, divisible JavaScript work into smaller tasks and yield so the app can respond to input.

Mentioned in this talk

CallstackShopifyThe Ultimate Guide to React Native OptimizationReact DevToolsFlashListReact CompilerCursorReact NativeReactJavaScriptContext EngineuseMemoFlatListScrollViewuseCallbackReduxZustandprofilingmemoizationvirtualized listsyielding

Search inside this talk

What was claimed 11

Related talks