4 ms·

I never really got why people LOVE two-way binding to the point that they add things like mobx to projects. IMHO the one way data flow makes things so much easi

I never really got why people LOVE two-way binding to the point that they add things like mobx to projects. IMHO the one way data flow makes things so much easier to reason about.

rk06 4y ago
In Vue two way data binding, like v-model="var1" is syntax sugar for `v-bind="var1" v-on:input="var1 = $event.value" The difference between this and rreact is less typing, easier mental model and less issues (because react calls render() multiple times)
- Rapzid 4y ago
  Which are also just sugars for creating setter callbacks.
- bayesian_horse 4y ago
  You only have issues with render getting called multiple times if you use React incorrectly...
  - rk06 4y ago
    That is one way to look at it. The other way is that vue/svelte/solid do not have a way for them to be used incorrectly
branko_d 4y ago
MobX is fantastic! But you do have to change your philosophy quite a bit compared to what you would do in vanilla React - namely you need to displace most of your state management to the outside of the components. Once you do that, React becomes purely functional (and quite "uni-directional", if that's the right term). Just update the state (in an event handler or when a Promise resolves after a fetch or another part of the UI finishes) and UI auto-magically reflects that on the screen. Arguably, MobX + React is closer to the React's original ideal of `UI = f(state)` than the vanilla React itself.
- machiaweliczny 4y ago
  Spitting truth right here. The problem is MobX is little too unfamiliar for newbies. I thought Zustand is kinda simplified clone but seems like computed properties don’t work super well.
- mrj 4y ago
  Agreed! Also, you can use strict mode with mobx and help force it to be one-way, it's up to you as a developer.
epolanski 4y ago
Two-way data binding trades a slightly more complex and less transparent rendering model for more efficient rendering. You don't re-render the entire component and diff the two components you have to understand changes, you simply change the leaf. I'd say in Vue it rarely causes troubles, in React world it leads to few non-obvious edge cases where React's one way data flow is indeed easier to reason about (but less performant).

I never really got why people LOVE two-way binding to the point that they add things like mobx to projects. IMHO the one way data flow makes things so much easier to reason about.

rk06 4y ago

In Vue two way data binding, like v-model="var1" is syntax sugar for `v-bind="var1" v-on:input="var1 = $event.value" The difference between this and rreact is less typing, easier mental model and less issues (because react calls render() multiple times)

Rapzid 4y ago
Which are also just sugars for creating setter callbacks.
bayesian_horse 4y ago
You only have issues with render getting called multiple times if you use React incorrectly...
- rk06 4y ago
  That is one way to look at it. The other way is that vue/svelte/solid do not have a way for them to be used incorrectly

branko_d 4y ago

MobX is fantastic! But you do have to change your philosophy quite a bit compared to what you would do in vanilla React - namely you need to displace most of your state management to the outside of the components. Once you do that, React becomes purely functional (and quite "uni-directional", if that's the right term). Just update the state (in an event handler or when a Promise resolves after a fetch or another part of the UI finishes) and UI auto-magically reflects that on the screen. Arguably, MobX + React is closer to the React's original ideal of `UI = f(state)` than the vanilla React itself.

machiaweliczny 4y ago
Spitting truth right here. The problem is MobX is little too unfamiliar for newbies. I thought Zustand is kinda simplified clone but seems like computed properties don’t work super well.
mrj 4y ago
Agreed! Also, you can use strict mode with mobx and help force it to be one-way, it's up to you as a developer.

epolanski 4y ago

Two-way data binding trades a slightly more complex and less transparent rendering model for more efficient rendering. You don't re-render the entire component and diff the two components you have to understand changes, you simply change the leaf. I'd say in Vue it rarely causes troubles, in React world it leads to few non-obvious edge cases where React's one way data flow is indeed easier to reason about (but less performant).