Управление несколькими состояниями внутри хука

С точки зрения обновления состояния, первый шаблон очень прост и удобен, потому что каждая функция stateUpdate будет отвечать за обновление одного значения, которое может быть obj/array/int/bool/string. Другое дело, что для доступа к каждому значению состояния (это будет объект) нужно писать states.slides, states.tagName и т.д.

В первом случае обновление состояния будет просто:

// only value in case of int/string/bool
updateState({ [key]: value }) or updateState(value);

Но во втором случае состояние будет объектом с несколькими ключами, поэтому для обновления любого отдельного значения вам нужно скопировать объект, а затем передать обновленное значение ключа. Как это:

updateState({
  ...obj,
  [key]: newValue
})

Чтобы обновить массив слайдов:

updateState(prevState => ({
  ...prevState,
  slides: newArray
}))

Обработка сложного обновления состояния:

Используйте useReducer для обработки сложного обновления состояния, напишите отдельную функцию-редуктор с действием типы и для каждого типа действия, поэтому расчет и возврат нового состояния.

Например:

const initialState = { slides: [], tagName: [], currentSlide: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'SLIDES':
      return { ... };
    case 'TAGNAME':
      return { ... };
    case 'CURRENT_SLIDE':
      return { ... }
    default:
      throw new Error();
  }
}

function Counter({initialState}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  ....
}