setStateをちょっとだけ工夫した話

最近PRレビューした中でこんな感じのstateがあった。

const start = type === 'start' ? argumentNumber : this.state.start;
const end = type === 'end'? argumentNumber : this.state.end;
this.setState({
 start,
 end,
 info: {
  hoge: 'textChanged'
 }
})

infoの中身は必ず変更されるけど、startとendはtypeによって変更有無が変わる。
なんかsetStateに不要な値入るの気持ち悪いと思いました。

let newState = {
 info: {
  hoge: 'textChanged'
 }
}
if (type === 'start') {
 newState = { ...newState, ...{ start: argumentNumber} }
} else {
 newState = { ...newState, ...{ end: argumentNumber } }
}
this.setState(newState)

こうしたほうが綺麗かも。
ただ変数の中身が動的に変化していくから、多用するとnewStateの中身がカオスになる。
できれば関数に分けたほうがメンテしやすそう。

function newPositionState(type) {
 if (type === 'start') {
  return { start: argumentNumber}
 } else {
  return { end: argumentNumber }
 }
}

let newState = {
 info: {
  hoge: 'textChanged'
 }
}

newState = { ...newState, newPositionState() }
this.setState(newState)

こうすれば読みやすい。
更新対象のstateが増えたとしても、特に問題なさそう。
もっといい方法があれば教えていただきたい。