What's the pros and cons of Vue's reactivity compares to immutable approach like React?

Question

Vue triggers component re-render by it's reactivity mechanism, so developers can mutate states directly. Vue will detect the state change and trigger component rerender.

React triggers component re-render by manually setState and React will diff VDOM to check if it should re-render or not. Developers are recommended not to mutate state directly but create new one to replace original state so the original and new states can be shallowEqual efficiently.(immutable approach).

For example, there's a state as follows:

state = { a: 1, b: 2 }

// mutate state in Vue
state.a = 3

// mutate state in React
this.setState({...state, a: 3 })

It seems that the reactivity mechanism is more intuitive and can write less code. I wonder what's the pros and cons between these two approaches? What scenario should I choose one over another?

Lobbyism

You're asking this like they're both the same framework and you're trying to compare two different methods within the same. It's not really an appropriate question... For example, how can there be an advantage or disadvantage of mutating state directly within React - when you can't? – Threw

Answer 1

I will answer the last question, so the first one won't be relevant anymore: Basically React has no advantages over other frameworks, except for popularity.

1. It is not faster for users neither for programmers.
2. Functional components are just batch of stuff that breaks a lot of programming principles (For example SOLID because Components are responsible for UI, Logic, State and Reactivity, because reactivity is impossible to implement outside an component.)
3. With React you always works in recursion (Render Component -> setState -> Render Component). Is is non-intuitive approach.
4. Moreover React makes you to write a lot of boilerplate code (useCallback, useMemo, classnames, import styles).
5. It has bad but popular libraries such as React Router or Redux. They inherit same problems from React and have some new ones.
6. It is difficult to debug due to endless re-renders especially in strict mode.

... and so on

In the future, when project becomes big, these problems will cost a lot of money.

So, if you have no problems with hiring other programmers choose Vue 3. Ofcourse it has some problems but they are not so global like react ones.

Ernestineernesto