Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use Dispatch Updaters for State That Depends on Current Value
6 
7When the next state depends on the current state, use a dispatch updater
8(`setState(prev => ...)`) instead of reading the state variable directly in a
9callback. This avoids stale closures and ensures you're comparing against the
10latest value.
11 
12**Incorrect (reads state directly):**
13 
14```tsx
15const [size, setSize] = useState<Size | undefined>(undefined)
16 
17const onLayout = (e: LayoutChangeEvent) => {
18  const { width, height } = e.nativeEvent.layout
19  // size may be stale in this closure
20  if (size?.width !== width || size?.height !== height) {
21    setSize({ width, height })
22  }
23}
24```
25 
26**Correct (dispatch updater):**
27 
28```tsx
29const [size, setSize] = useState<Size | undefined>(undefined)
30 
31const onLayout = (e: LayoutChangeEvent) => {
32  const { width, height } = e.nativeEvent.layout
33  setSize((prev) => {
34    if (prev?.width === width && prev?.height === height) return prev
35    return { width, height }
36  })
37}
38```
39 
40Returning the previous value from the updater skips the re-render.
41 
42For primitive states, you don't need to compare values before firing a
43re-render.
44 
45**Incorrect (unnecessary comparison for primitive state):**
46 
47```tsx
48const [size, setSize] = useState<Size | undefined>(undefined)
49 
50const onLayout = (e: LayoutChangeEvent) => {
51  const { width, height } = e.nativeEvent.layout
52  setSize((prev) => (prev === width ? prev : width))
53}
54```
55 
56**Correct (sets primitive state directly):**
57 
58```tsx
59const [size, setSize] = useState<Size | undefined>(undefined)
60 
61const onLayout = (e: LayoutChangeEvent) => {
62  const { width, height } = e.nativeEvent.layout
63  setSize(width)
64}
65```
66 
67However, if the next state depends on the current state, you should still use a
68dispatch updater.
69 
70**Incorrect (reads state directly from the callback):**
71 
72```tsx
73const [count, setCount] = useState(0)
74 
75const onTap = () => {
76  setCount(count + 1)
77}
78```
79 
80**Correct (dispatch updater):**
81 
82```tsx
83const [count, setCount] = useState(0)
84 
85const onTap = () => {
86  setCount((prev) => prev + 1)
87}
88```
89