Имеется функция, где вызывается несколько разных 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>
)
}
Выложил только небольшую часть кода, как мне кажется, самую необходимую. Если этого мало, могу выложить бОльшую часть проекта.