fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.7 KiB
1.7 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Minimize State Variables and Derive Values | MEDIUM | fewer re-renders, less state drift | state, derived-state, hooks, optimization |
Minimize State Variables and Derive Values
Use 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.
Incorrect (redundant state):
function Cart({ items }: { items: Item[] }) {
const [total, setTotal] = useState(0);
const [itemCount, setItemCount] = useState(0);
useEffect(() => {
setTotal(items.reduce((sum, item) => sum + item.price, 0));
setItemCount(items.length);
}, [items]);
return (
<View>
<Text>{itemCount} items</Text>
<Text>Total: ${total}</Text>
</View>
);
}
Correct (derived values):
function Cart({ items }: { items: Item[] }) {
const total = items.reduce((sum, item) => sum + item.price, 0);
const itemCount = items.length;
return (
<View>
<Text>{itemCount} items</Text>
<Text>Total: ${total}</Text>
</View>
);
}
Another example:
// Incorrect: storing both firstName, lastName, AND fullName
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [fullName, setFullName] = useState('');
// Correct: derive fullName
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const fullName = `${firstName} ${lastName}`;
State should be the minimal source of truth. Everything else is derived.
Reference: Choosing the State Structure