предыдущее состояние в крюках

Question

Тип 1:

const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(count + 1)}>+</button>

Тип 2:

const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>

Хотя оба приведенных выше кода дают одинаковый результат, в чем разница между ними, и почему второй метод предпочтительнее, чем первый

Answer 1

Разница в том, что Тип 2 имеет самое последнее значение, а Тип 1 имеет самое последнее значение с момента последнего refre sh. Вы заметите, если setCount вызывается несколько раз, прежде чем произойдет какое-либо обновление sh.

const [count, setCount] = useState(0);
const someFunction => () => {
   console.log(count); //0
   setCount(count + 1); // count will be set to 1 on next refresh
   console.log(count); //still 0
   setCount(count + 1); // count will still be 1  on next refresh since count hasn't been refreshed
   console.log(count); //still 0
   setCount(c => c + 1); // count will be 2 on next refresh since c has the latest value
   console.log(count); //still 0
};

Answer 2

состояние обновления является асинхронным, поэтому возможно, что при повторном обновлении его будет предыдущее значение в состоянии «количество»