1---
2title: Minimize State Variables and Derive Values
3impact: MEDIUM
4impactDescription: fewer re-renders, less state drift
5tags: state, derived-state, hooks, optimization
6---
7 
8## Minimize State Variables and Derive Values
9 
10Use 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.
11 
12**Incorrect (redundant state):**
13 
14```tsx
15function Cart({ items }: { items: Item[] }) {
16  const [total, setTotal] = useState(0)
17  const [itemCount, setItemCount] = useState(0)
18 
19  useEffect(() => {
20    setTotal(items.reduce((sum, item) => sum + item.price, 0))
21    setItemCount(items.length)
22  }, [items])
23 
24  return (
25    <View>
26      <Text>{itemCount} items</Text>
27      <Text>Total: ${total}</Text>
28    </View>
29  )
30}
31```
32 
33**Correct (derived values):**
34 
35```tsx
36function Cart({ items }: { items: Item[] }) {
37  const total = items.reduce((sum, item) => sum + item.price, 0)
38  const itemCount = items.length
39 
40  return (
41    <View>
42      <Text>{itemCount} items</Text>
43      <Text>Total: ${total}</Text>
44    </View>
45  )
46}
47```
48 
49**Another example:**
50 
51```tsx
52// Incorrect: storing both firstName, lastName, AND fullName
53const [firstName, setFirstName] = useState('')
54const [lastName, setLastName] = useState('')
55const [fullName, setFullName] = useState('')
56 
57// Correct: derive fullName
58const [firstName, setFirstName] = useState('')
59const [lastName, setLastName] = useState('')
60const fullName = `${firstName} ${lastName}`
61```
62 
63State should be the minimal source of truth. Everything else is derived.
64 
65Reference: [Choosing the State Structure](https://react.dev/learn/choosing-the-state-structure)
66