vercel-react-native-skills

Pass primitive props to memoized list items, hoist callbacks to the list root, avoid inline objects in renderItem, and keep items lightweight without queries or context access. Use getItemType for heterogeneous lists to enable efficient recycling pools.

Using {value && <Component />} crashes when value is an empty string or 0, because React Native tries to render the falsy value as text outside a Text component. Use ternaries, explicit boolean coercion, or early returns instead.

Use a virtualizer like LegendList or FlashList even for short lists. ScrollView mounts all children upfront, while virtualizers render only visible items, reducing memory usage and mount time on any scrollable screen.

Yes. With React Compiler enabled, use .get() and .set() methods instead of reading or writing .value directly on shared values. The compiler cannot track property access, so explicit methods ensure correct behavior.

Both are recommended virtualizers in these guidelines. LegendList supports getItemType for heterogeneous recycling pools and estimatedItemSize, while FlashList from Shopify is a proven alternative. Either is preferred over ScrollView with mapped children.

Animate only transform and opacity properties, which run on the GPU. Animating width, height, or margin triggers layout recalculation every frame. For press states, use GestureDetector with Gesture.Tap so callbacks run as UI thread worklets.