Как вместо нескольких вызовов рендера выполнить один?

Question

[n1ksON]

Имеется функция, где вызывается несколько разных setState (setState1, setState2, setState3) и компонента рендерится три раза. Почему React не оптимизирует три вызова setState? Если я не ошибаюсь, в доке написано, что React будет оптимизировать несколько вызовов setState. Или это работает только, когда это относится к одному state, а не к разным?
Вот код:

const initialState = { text: [], answer: [] }
const reducer = (textarea, action) => {
  switch (action.type) {
    case 'write':
      return { text: action.text, answer: [] }
    case 'clear':
      return { text: textarea.text, answer: [] }
    default:
      console.log('error')
  }
}
const App = () => {
const [img, setImg] = useState({ state: 0 })
const [textarea, dispatch] = useReducer(reducer, initialState)
const record = () => {
          dispatch({ type: 'write', text: [] })
          dispatch({ type: 'clear' })
          setImg(prev => ({
              ...prev,
              state: 1,
            })
          })
}
return (
<button onClick={record}>Click</button>
)
}

Выложил только небольшую часть кода, как мне кажется, самую необходимую. Если этого мало, могу выложить бОльшую часть проекта.

Answer 1

[abberati]

Или это работает только, когда это относится к одному state, а не к разным?

Да, именно так

Comments

[n1ksON]

А можно ли как-то оптимизировать этот процесс? Только если занести всё в один общий state?

[abberati]

n1ksON, обычно такие вещи выносят в стейт-менеджер, в котором обычно есть подобные оптимизации

[n1ksON]

abberati, ну понятно. Что ж, тогда придётся юзать редакс

[abberati]

n1ksON, кроме редакса есть эффектор, мобыкс, реатом и ещё много-много решений

[n1ksON]

abberati, да я с редаксом знаком просто уже. Ну и считаю его наиболее удобным. Но в любом случае спасибо