Когда мы используем компонент класса React, существует метод экземпляра setState(updater[, callback])
.
setState
обратный вызов, который гарантированно сработает после применения обновления.
Однако, когда мы используем метод setState
, возвращаемый хуком useState()
, у него больше нет callback
.
Давайте сравним setState(updater[, callback])
и setState
, возвращаемый хуком useState()
.
// We can see all the logic at a glance
const onIncreaseButtonClick = () => {
// step 1. Updating the state
const nextState = {};
this.setState(nextState, () => {
// step 2. call API
});
}
//...
const [state, setState] = useState();
useEffect(() => {
// step 2. call API
}, [state]);
// We need to scroll the editor to the top to see the second part of the logic
// 200 lines code
// ...
// ...
const onIncreaseButtonClick = () => {
// step 1. Updating the state
const nextState = {};
setState(nextState);
}
Видите ли вы разницу?
Когда происходит событие нажатия кнопки, у нас есть две части логики: обновление состояния и вызов API.
В первом случае две части логического кода организованы вместе, а порядок выполнения и порядок записи кода одинаковы.
Во втором случае две части логики разделены по разным местам, логика обновления состояния находится в обработчике события, а логика вызова API — в useEffect()
. И порядок выполнения и порядок чтения (записи) не совпадают.
Некоторые люди придерживаются того же мнения, что и я, например, https://stackoverflow.com/questions/54954091/how-to-use-callback-with-usestate-hook-in-react.
Поэтому кто-то реализует хук useStateCallback
.
Что вы думаете?