Несколько переменных состояния

У компонента может быть сколько угодно переменных состояния: вызывайте useState по одному разу для каждой. Это необязательно числа. Вот голосование, которое хранит число и текст:

const [votes, setVotes] = useState(0);
const [lastVote, setLastVote] = useState("пока никого");

function handleVote(name) {
    setVotes(votes + 1);
    setLastVote(name);
}

return (
    <main>
        <p>Голосов: {votes}</p>
        <p>Последний голос: {lastVote}</p>
        <button onClick={() => handleVote("Ночные поезда")}>Ночные поезда</button>
        <button onClick={() => handleVote("Лунные коты")}>Лунные коты</button>
    </main>
);

После клика по «Лунным котам» страница показывает Голосов: 1 и Последний голос: Лунные коты. Один обработчик изменил две переменные состояния. React отрисовывает не после каждого сеттера: он ждёт, пока обработчик закончит, и затем отрисовывает один раз, сразу с обоими новыми значениями.

Каждая переменная состояния независима. setVotes() меняет только votes, а lastVote остаётся как была. React различает их по порядку, в котором компонент вызывает useState, поэтому хуки всегда стоят в начале компонента и вызываются каждый раз в одном и том же порядке.

Не всё, что показывает страница, требует собственного состояния. Если значение можно вычислить из уже имеющегося состояния, вычисляйте его при отрисовке:

const votesLeft = 5 - votes;

С <p>Осталось голосов: {votesLeft}</p> страница всегда показывает верное число, потому что votesLeft вычисляется заново при каждой отрисовке. Третья переменная состояния для него стала бы лишь ещё одним значением, которое надо согласовывать с остальными, и ещё одним местом для ошибки.