HausApp/.agents/skills/vercel-react-native-skills/rules/react-state-minimize.md

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