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
Destructure Functions Early in Render (React Compiler)
impact
HIGH
impactDescription
stable references, fewer re-renders
tags
rerender, hooks, performance, react-compiler

Destructure Functions Early in Render

This rule is only applicable if you are using the React Compiler.

Destructure functions from hooks at the top of render scope. Never dot into objects to call functions. Destructured functions are stable references; dotting creates new references and breaks memoization.

Incorrect (dotting into object):

tsx
import { useRouter } from 'expo-router'
function SaveButton(props) {  const router = useRouter()
  // bad: react-compiler will key the cache on "props" and "router", which are objects that change each render  const handlePress = () => {    props.onSave()    router.push('/success') // unstable reference  }
  return <Button onPress={handlePress}>Save</Button>}

Correct (destructure early):

tsx
import { useRouter } from 'expo-router'
function SaveButton({ onSave }) {  const { push } = useRouter()
  // good: react-compiler will key on push and onSave  const handlePress = () => {    onSave()    push('/success') // stable reference  }
  return <Button onPress={handlePress}>Save</Button>}