предотвратить бесконечное l oop при вызове setState в useCallback

Question

Если я добавлю movement к массиву зависимостей useCallback, я получу бесконечное l oop, но без него я получу предупреждения о добавлении.

Как правильно с этим справиться, хотя сохранить состояние как объект?

// state
const [
    { movement, start, ..., ..., ...},
    setState,
  ] = useState({
    movement: 0,
    start: 0,
    ....    ,
    ....    ,
    ....    ,

...

// handler
const handleMouseMove = useCallback(
    ({ xpos }) => {
      const walk = xpos - start
      const atStart = walk + movement > 0
      setState(state => ({
        ...state,
        movement: atStart ? 0 : walk + movement,
      }))
    },
    [start]
  )

Answer 1

      setState(state => ({
    ...state,
    movement: atStart ? 0 : walk + movement,
  }))

На самом деле вы используете обновленное движение в setState, которое вызывает его изменение каждый раз, которое вызывает бесконечное l oop. Вы должны использовать предыдущее движение по нему.

      setState(state => ({
    ...state,
    movement: atStart ? 0 : walk + state.movement,
  }))

Answer 2

При использовании React.useState следите за тем, чтобы не хранить объекты. Здесь вы должны создать 2 разные переменные состояния для movement и start. Это должно исправить вашу проблему.

Если вы хотите сохранить сложное состояние, вы можете вместо этого взглянуть на React.useReducer.