Cursor rule

1---
2alwaysApply: false
3---
4 
5## Destructure Functions Early in Render
6 
7This rule is only applicable if you are using the React Compiler.
8 
9Destructure functions from hooks at the top of render scope. Never dot into
10objects to call functions. Destructured functions are stable references; dotting
11creates new references and breaks memoization.
12 
13**Incorrect (dotting into object):**
14 
15```tsx
16import { useRouter } from 'expo-router'
17 
18function SaveButton(props) {
19  const router = useRouter()
20 
21  // bad: react-compiler will key the cache on "props" and "router", which are objects that change each render
22  const handlePress = () => {
23    props.onSave()
24    router.push('/success') // unstable reference
25  }
26 
27  return <Button onPress={handlePress}>Save</Button>
28}
29```
30 
31**Correct (destructure early):**
32 
33```tsx
34import { useRouter } from 'expo-router'
35 
36function SaveButton({ onSave }) {
37  const { push } = useRouter()
38 
39  // good: react-compiler will key on push and onSave
40  const handlePress = () => {
41    onSave()
42    push('/success') // stable reference
43  }
44 
45  return <Button onPress={handlePress}>Save</Button>
46}
47```
48