React and VueJs don’t make use of reactive programming. That is, they don’t track the data flow through the application.
Instead they treat the application as a black box and when a state changes, they rerender the whole component and all it’s children, instead of just the changed value.
Technically that doesn’t make it less “truly reactive” than Svelte, since reactivity doesn’t care about how the app itself or the rendering system works.
To me reactive programming is to track data and the data flow through the application and when a state variable changes, update the variables that depend on that changed variable.
React and Vue cannot track which places to update when a state variable changes and as a result updates the whole component where the state variable resides as well as all its children. Thereby, in my opinion, does not apply reactive programming principles.
Svelte on the other hand, can track data through the application and only update the variables that depend on the variable that's updated. Which in my opinion better applies to reactive programming.
Hope my explanation makes sense. If you want a more thorough explanation, then I recommend you to watch Rich Harris talk on rethinking reactivity (youtu.be/AdNJ3fydeao).
According to Wikipedia, “reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change.”. So basically if I say a = b + c, a will change when b or c change, and it doesn’t matter how it’s implemented.
Yes, that is true. But the article you are referring to also state that
"in reactive programming, the value of a is automatically updated whenever the values of b or c change, without the program having to re-execute the statement a:=b+c to determine the presently assigned value of a."
In react or VueJS, when a value like a in your example changes, we have to rerun the same code and thereby re-execute the statement a = b + c. Making React or VueJS not reactive by that definition. In SvelteJS, the values are automatically updated as in the definition.
Please explain why React and Vue are not “truly reactive”.
Thank you for the comment!
React and VueJs don’t make use of reactive programming. That is, they don’t track the data flow through the application.
Instead they treat the application as a black box and when a state changes, they rerender the whole component and all it’s children, instead of just the changed value.
Technically that doesn’t make it less “truly reactive” than Svelte, since reactivity doesn’t care about how the app itself or the rendering system works.
To me reactive programming is to track data and the data flow through the application and when a state variable changes, update the variables that depend on that changed variable.
React and Vue cannot track which places to update when a state variable changes and as a result updates the whole component where the state variable resides as well as all its children. Thereby, in my opinion, does not apply reactive programming principles.
Svelte on the other hand, can track data through the application and only update the variables that depend on the variable that's updated. Which in my opinion better applies to reactive programming.
Hope my explanation makes sense. If you want a more thorough explanation, then I recommend you to watch Rich Harris talk on rethinking reactivity (youtu.be/AdNJ3fydeao).
According to Wikipedia, “reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change.”. So basically if I say
a = b + c,awill change whenborcchange, and it doesn’t matter how it’s implemented.Yes, that is true. But the article you are referring to also state that
"in reactive programming, the value of a is automatically updated whenever the values of b or c change, without the program having to re-execute the statement a:=b+c to determine the presently assigned value of a."
In react or VueJS, when a value like a in your example changes, we have to rerun the same code and thereby re-execute the statement a = b + c. Making React or VueJS not reactive by that definition. In SvelteJS, the values are automatically updated as in the definition.
Not sure how Svelte would know what
ais without rerunning that code.In Svelte, we can reassign the value of a without redeclaring the inline function. Which we would have to do in React.
That is one of my points about Svelte being truly reactive.
Not sure what you mean by “redeclaring the inline function”.