vercel-react-native-skills

Use a virtualized list like LegendList or FlashList instead of ScrollView, pass primitive props to memoized list items, hoist callbacks to the list root, and keep object references stable. Avoid inline objects in renderItem since new references break memoization.

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.

Both are supported virtualizers that render only visible items, reducing memory and mount time compared to ScrollView. LegendList additionally supports getItemType for heterogeneous lists with separate recycling pools per item type.

Yes, several rules address React Compiler compatibility, such as destructuring functions early in render and using .get()/.set() on Reanimated shared values. With the compiler enabled, manual memo() and useCallback() optimizations become less critical.

Animating layout properties like width, height, or margin triggers layout recalculation on every frame, causing jank. Animate transform (scale, translate) and opacity instead, since these run on the GPU without triggering layout.

Never store scroll position in useState, because rapid scroll events cause render thrashing and dropped frames. Use a Reanimated shared value for animations or a ref for non-reactive tracking instead.