Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

View sourceExpoReact NativePerformanceMotion

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
title
Minimize State Variables and Derive Values
impact
MEDIUM
impactDescription
fewer re-renders, less state drift
tags
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):

tsx
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):

tsx
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:

tsx
// Incorrect: storing both firstName, lastName, AND fullNameconst [firstName, setFirstName] = useState('')const [lastName, setLastName] = useState('')const [fullName, setFullName] = useState('')
// Correct: derive fullNameconst [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