How do I use it for list optimization?

The skill provides immediate 'Incorrect vs Correct' patterns for replacing standard ScrollViews with virtualized lists like FlashList to maintain 60 FPS during heavy scrolling.

How does this skill improve app startup time?

It provides specific guidelines for TTI (Time to Interactive) optimization, including Hermes mmap configuration, disabling bundle compression on Android, and leveraging native navigation libraries.

Can it help with memory leaks?

Yes, the skill includes specialized references for identifying, measuring, and fixing both JavaScript and native-side memory leaks in iOS and Android environments.

Does it support the latest React Native features?

Absolutely, it covers modern architecture patterns like the React Compiler, Turbo Modules, and Concurrent React features such as useDeferredValue and useTransition.

React Native Best Practices

Name: React Native Best Practices
Author: callstackincubator

bycallstackincubator

•

670

Mobile Development

Optimizes React Native application performance through expert guidelines on FPS, bundle size, and native module efficiency.

About

This skill integrates Callstack's industry-leading optimization strategies directly into Claude, enabling developers to diagnose and resolve performance bottlenecks in React Native apps. It covers critical areas such as JavaScript thread blocking, Hermes engine optimization, TTI (Time to Interactive) reduction, and memory leak detection, providing both quick-fix patterns and deep-dive technical references for building high-performance mobile applications on iOS and Android based on the 'Ultimate Guide to React Native Optimization'.

Key Features

Optimized list rendering patterns using FlashList and FlatList
Performance profiling for FPS, TTI, and bundle size
Efficient state management strategies using Jotai and Zustand
670 GitHub stars
Native module and Turbo Module implementation guidelines
Advanced bundling techniques including tree shaking and R8 optimization

Use Cases

Reducing application bundle size and improving cold start times (TTI)
Debugging UI jank and frame drops in complex animations or long lists
Migrating legacy components to modern, high-performance React Native patterns

About

Key Features

Optimized list rendering patterns using FlashList and FlatList
Performance profiling for FPS, TTI, and bundle size
Efficient state management strategies using Jotai and Zustand
670 GitHub stars
Native module and Turbo Module implementation guidelines
Advanced bundling techniques including tree shaking and R8 optimization

Use Cases

Reducing application bundle size and improving cold start times (TTI)
Debugging UI jank and frame drops in complex animations or long lists
Migrating legacy components to modern, high-performance React Native patterns