vercel-react-native-skills

Use a virtualizer like LegendList or FlashList instead of ScrollView, pass primitive props to memoized list items, keep item components free of queries and heavy hooks, and avoid creating inline objects in renderItem. Stable object references let virtualization skip unchanged rows.

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 useDerivedValue when computing one shared value from another, since it tracks dependencies declaratively and returns a usable value. Reserve useAnimatedReaction for side effects like haptics or runOnJS calls that produce no value.

Yes. With React Compiler enabled, use .get() and .set() methods instead of reading or writing .value directly on shared values, because the compiler cannot track property access and would otherwise opt out of compilation.

Install packages containing native code directly in the app directory's package.json, because autolinking only scans the app's node_modules. Also pin single exact versions across all packages using pnpm overrides or syncpack to avoid duplicate bundles.

Never store scroll position in useState, since scroll events fire rapidly and each state update triggers a re-render, causing dropped frames. Use a Reanimated shared value for scroll-driven animations or a ref for non-reactive tracking.