Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

View sourceExpoReact NativePerformanceMotion

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
title
Hoist callbacks to the root of lists
impact
MEDIUM
impactDescription
Fewer re-renders and faster lists
tags
tag1, tag2

List performance callbacks

Impact: HIGH (Fewer re-renders and faster lists)

When passing callback functions to list items, create a single instance of the callback at the root of the list. Items should then call it with a unique identifier.

Incorrect (creates a new callback on each render):

typescript
return (  <LegendList    renderItem={({ item }) => {      // bad: creates a new callback on each render      const onPress = () => handlePress(item.id)      return <Item key={item.id} item={item} onPress={onPress} />    }}  />)

Correct (a single function instance passed to each item):

typescript
const onPress = useCallback(() => handlePress(item.id), [handlePress, item.id])
return (  <LegendList    renderItem={({ item }) => (      <Item key={item.id} item={item} onPress={onPress} />    )}  />)

Reference: Link to documentation or resource