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