Cursor rule

1---
2alwaysApply: false
3---
4 
5## Minimize State Variables and Derive Values
6 
7Use the fewest state variables possible. If a value can be computed from existing state or props, derive it during render instead of storing it in state. Redundant state causes unnecessary re-renders and can drift out of sync.
8 
9**Incorrect (redundant state):**
10 
11```tsx
12function Cart({ items }: { items: Item[] }) {
13  const [total, setTotal] = useState(0)
14  const [itemCount, setItemCount] = useState(0)
15 
16  useEffect(() => {
17    setTotal(items.reduce((sum, item) => sum + item.price, 0))
18    setItemCount(items.length)
19  }, [items])
20 
21  return (
22    <View>
23      <Text>{itemCount} items</Text>
24      <Text>Total: ${total}</Text>
25    </View>
26  )
27}
28```
29 
30**Correct (derived values):**
31 
32```tsx
33function Cart({ items }: { items: Item[] }) {
34  const total = items.reduce((sum, item) => sum + item.price, 0)
35  const itemCount = items.length
36 
37  return (
38    <View>
39      <Text>{itemCount} items</Text>
40      <Text>Total: ${total}</Text>
41    </View>
42  )
43}
44```
45 
46**Another example:**
47 
48```tsx
49// Incorrect: storing both firstName, lastName, AND fullName
50const [firstName, setFirstName] = useState('')
51const [lastName, setLastName] = useState('')
52const [fullName, setFullName] = useState('')
53 
54// Correct: derive fullName
55const [firstName, setFirstName] = useState('')
56const [lastName, setLastName] = useState('')
57const fullName = `${firstName} ${lastName}`
58```
59 
60State should be the minimal source of truth. Everything else is derived.
61 
62Reference: [Choosing the State Structure](https://react.dev/learn/choosing-the-state-structure)
63