DEV Community

Comparing reactivity models - React vs Vue vs Svelte vs MobX vs Solid vs Redux

Mateo Hrastnik on August 04, 2020

If you're reading this article you're probably already familiar with the concept of reactive programming, but just in case, let me explain what is ...

Read full post

Mark Erikson • Aug 4 '20 • Edited

I'd just like to say thanks for writing a nice balanced framework comparison article that emphasizes that all frameworks have pros, cons, and tradeoffs for accomplishing the same tasks! Too many articles turn it into "FrameworkA vs FrameworkB, FIGHT!".

(Since I'm a Redux maintainer and you have a MobX example in here, I'd like to request that you add a Redux example for comparison as well, preferably using syntax from our official Redux Toolkit package, but the article is excellent regardless.)

Mateo Hrastnik • Aug 9 '20

Hi Mark!

I've updated the article with Redux Toolkit!

Mateo Hrastnik • Aug 5 '20

Hi Mark! Thanks a lot for taking the time to read the article!

I'll try to add the Redux example as soon as I find the time.

Dima • Aug 12 '20 • Edited

Thank you for cool comparison article!
You should give a try for Effector. I found this solution about a year ago, and I'm crazy excited... Already used it on some production projects.

I prepared a repl, where I tried to make it similar to your example as much as possible, to implement it using effector.
share.effector.dev/vLXa3WtO
If this solution is worthy of your attention, it would be a good idea to include it in the article. Or maybe even in your production😉😃

Dave Ceddia • Aug 4 '20

Good article! Nice to see the same thing implemented in a bunch of the popular frameworks.

I've been playing with Svelte a bit lately too, I think it's great. You mentioned the thing = thing weirdness, and I agree it's a bit weird to get used to, but you can also write things the "immutable" way to avoid it. I noticed your removeTodo function does it this way, so maybe you already knew about this, but for setTodoCompleted you could write it this way and avoid the todoList = todoList:

function setTodoCompleted(todo, value) {
  todoList = todoList.map(t => {
    if(t === todo) {
      todo.completed = value
    }
    return t;
  })
}

Or, also, since you have the whole todo there already, there's no need to find it first, and you could do this:

function setTodoCompleted(todo, value) {
  todo.completed = value;
  todoList = todoList;
}

I tried todo.completed = value by itself and was a bit surprised it didn't work, because it seems Svelte should be able to "know" that todo came from that todoList array when it parses the template. That might be too hard with static analysis though.

Someone else already mentioned the input value binding thing, and yeah, you can shorten the code a bit by declaring a let inputValue up top and then doing <input id="new-todo" bind:value={inputValue} />. Svelte will bind that variable, and then you can just use it as normal in the addTodo function, without having to query for the input element.

Mateo Hrastnik • Aug 5 '20

Hi Dave!

I've updated the Svelte example with todo.completed = value. Thanks for the suggestion.

I've explained my reasoning for using querySelector to grab the input value in a reply on Silvestres comment.

Silvestre Vivo • Aug 4 '20 • Edited

Writting this => const input = document.querySelector('#new-todo'); and not bind:value for Svelte, it shows us you don't have so many knowledge about Svelte.

Mateo Hrastnik • Aug 5 '20

Hi Silvestre! I am aware that using querySelector to get the value of the input is not idiomatic Svelte, but you'll notice I used the same approach for all frameworks/libraries.
I also didn't use v-model in Vue, didn't useState in React etc.

The idea was to use the reactivity models to expose an API to add todos, remove todos, change todo status and reactively log changes after each action.

I tried to keep the UI state out of the comparison, so I used querySelector and changed the inputs value manually.

Thanks for your reply.

Silvestre Vivo • Aug 5 '20

I saw that, but being honest, the code you have with Svelte is smaller and more readable than with VUE, and even could be beter refactored. Currently the only framework which is pure reactive is Svelte. As some people say, React is a bad name for React. Cheers!

Mateo Hrastnik • Aug 5 '20

We all have our preferences, but after all, we're developers, so we just have to be above it and use whatever is the right tool for the job/management forces upon us/legacy project was written in. 😁

Ryan Carniato • Oct 2 '20

I'd like to clarify Solid is completely reactive. Arguably the most pure in the list as everything lives in it. The Components are just function calls and every part of the lifecycle is a reactive computation. Updates happen granularly at a per expression level. There are no other concepts.

Svelte is also reactive but coarser grained. While also not using a VDOM its observers are merged with its Component system. It opts for splitting create/update paths as a means to optimize. In so lifecycle feels closer to something like Vue or React+MobX.

Gregori Piñeres • Aug 5 '20

Excellent article friend, I liked you to use vue.js 3 for this example.

Mateo Hrastnik • Aug 5 '20

Thanks for taking the time to read it 😁.

Vue 3 is the future, after all!

Daniel Rios • Jun 28 '22

Vue 3 still uses VirtualDOM, it is more to the past. The future is to get rid of the VirtualDOM and to be a compiler instead of a runtime, this is what both Solid and Svelte do, Solid came to substitute React and Svelte to substitute Vue.

Samuel Batista • Sep 14 '20 • Edited

I think you might want to take a look at immer-reducer, it makes working with Redux a lot simpler: github.com/esamattis/immer-reducer

Here's an example app that uses it: github.com/gamedevsam/calendar-app...

I'm a fan of Mobx myself, but if I was going to pick anything else, it would be Redux with Immer Reducer. Such elegant syntax with first class TypeScript support.

At a high level, immer-reducer turns your reducers into simple classes. Reducer actions are just simple function calls, and you mutate the state directly and under the hood immer is used to generate patches that are applied to the state that is passed to React.

The one disadvantage over Mobx is the need to still write connector components, but that can be a good thing making clear separation between stateless and stateful components depending on who you ask.