Является ли плохим дизайном удаление обратного вызова setState?

Когда мы используем компонент класса 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.

Что вы думаете?

Оцените статью
devanswers.ru
Добавить комментарий