The Difference Between Vue and React

today we're going to be talking about some of the differences between View and react I'm not going to be talking about surface level differences things like templates and jsx the more some of the deeper philosophical differences between the two Frameworks to illustrate this I have two components one in react and one in view both of them do exactly the same thing when you click on a button it is going to increment a value and cause a re-render updating the user interface let's go ahead and take a look at the two components and see how they're structured on the left you can see we have a react component we're using a use date hook to create some count and we're going to have two console logs the first is going to be in the body of the component and it's just going to save us as a log the second is going to be an effect that is only logged when the count variable is changed finally we have some HTML down here on the right hand side we have a view component which does exactly the same thing we have a reactive count variable created with a ref we're then going to go ahead and update it when you click on the button and we have two console logs the first is free hanging inside of the component body and the second is wrapped inside of an effect which is only going to be logged when count is changed let's go ahead and take a look at the application you can see on the initial render everything is exactly the same both of them log that console log in the body of the component then the effect is going to be executed if we go ahead and click on the button for react we're going to see the same two console logs repeated the first is going to be the component one and the second is going to be the effect this makes sense based on react reactivity model everything is going to be re-rendered or re-executed every single time so we're going to go ahead execute the hooks we're going to execute the console log or technically we don't execute the hooks but you can kind of think of it as if we do we're going to get a new account every single time now we're going to go ahead re-execute the console and return this new updated state of the world containing the new count if we head over to the view component we can see this is a little bit different it's going to go ahead and click this a bunch of times we're only getting one console log and that's from the watch effect that's over here this is very different because reviews lifecycle is very different in view all of this code is only going to be executed once and that's on the initial render as opposed to react which is going to re-execute everything every single time the only way we're going to get something changing for example a console log is by opting into reactivity and this is sometimes where people say views reactivity is opt-in I need to explicitly call out watch effect if I'd like to see this console log and I also have to opt into reactivity by using this ref function from fuse reactivity apis let's see another example to drive this point home I'm going to create a new variable called const icons double and that's just going to be equal to count times two I'm not doing anything special here I'm just going to go ahead and declare a JavaScript variable then we're going to go ahead and render it in react we're going to perform exactly the same thing in View and see what happens so let's just go ahead and create that variable I need to say value in View and we're going to go ahead and render double let's save it off and see what happens hey back to the browser we can see react is working exactly how you'd expect we're going to double that variable every single time this is why a lot of people will say react is just JavaScript I'm not doing anything special here I'm just creating a new variable and because react reacts re-executes everything every single time this variable is of course going to be updated the same cannot be said for view you can see this value is going to be stuck at zero the reason is as we said before all this code is only executed once inside of view View's reactivity is opt-in what this means we need to do is opt into reactivity in this case we would need to use something called computed it's going to recompute every time a dependency changes in this case we have a reactive dependency of count we save this one off and head back to the browser we're now correctly in opting into reactivity and everything is working as you would expect so that's uh why view is kind of more granular and while we say it is opt-in reactivity you can kind of say react is opt out of reactivity and I'm going to show you what I mean by that in just a moment what we're going to do is create a new variable called now I'm going to go ahead and create a new value here called new date and this is going to be to UTC string it's going to give me the current date time finally I'm going to go ahead and inline this variable and this of course is going to update and show the current time every time the component is re-rendered we're going to do the same thing in View and as we established this code up here is only executed once when the component is first mounted so I'd like to put this in line in my template every time this re-renders I'm going to see if the last time it was re-rendered let's go ahead and save it off we head back to the browser this is of course going to work as expected both of these are going to show the timestamp but last time the component was updated before we go any further now is probably a good time to discuss the reactivity systems and take a bit of a step back and appreciate what we are looking at we can see in react we are not going to mutate variables ever everything is constant and there is no mutation whatsoever if I'd like to change the state of the world what I need to do is call a function and pass in the new state in this case I'm saying count is going to change and I'm passing in the new state which is going to be count Plus 1. the reactor is going to then recognize the world has changed in some form it doesn't know exactly how the world's changed but because it knows something has changed it's just going to re-render everything and give me the new state of the world this is in contrast to view view is what we call mutated based reaction or reactivity you can see the way we change the state of the world in view is not by calling a function but it's by actually reassigning the state of the world we're saying the world is exactly the same as it was before except for this one thing which is going to be different count value is going to change view then detects any mutation and whenever something is mutated it is going to go ahead and re-render anything that is dependent on that value in this case double was previously dependent on that value and because double is used inside of this template it is going to go ahead and re-render everything to illustrate this difference a little bit more let's go ahead and change this I'm going to create a new function called set count 2 which is going to do exactly the same thing with a new account let's go ahead and update these two so we're going to hit set count two we're going to do exactly the same thing over here inside of view as well I'm going to have on Click 2 which is going to be a new variable let's just go ahead and create count two and on click2 is going to do exactly what you might expect this is probably the idiomatic way to do it in view because we're using mutation we don't need to pass any arguments it's not as functional or pure as react I can just go ahead and mutate the variables like this just to make these as similar as possible for demonstration purposes what I am going to do is pass a value in here I'm going to pass in the new value count two plus one we're then going to come up here and receive a new vowel which is going to be a number and then we're going to reassign Count 2 to be our new value so these react and view codes are very very similar at this point let's go ahead now and give this a try and see what happens in the react example you can see no matter what happens and wherever I click we are going to re-render the component and you can see this is evidenced by this value changing and this is actually not the case in view which is very interesting the first one of course is going to cause a re-render because we're using the count but Count 2 is not going to be used anywhere and this is actually not going to cause a re-render and this is one of the nice things about having an opt-in reactivity system and about having a mutation-based reactivity system you can see over here in view we're mutating count two but because view knows exactly what was mutated and it also knows where Count 2 was used in this case Count 2 is actually not used anywhere we're not rendering it so there's no reason to re-render the Dom template and for this reason nothing has changed it's not going to re-render anything because it knows the dependency is not being used anywhere the same cannot be said for react although we have count two here and it's not been rendered anywhere react doesn't know that count 2 was changed but it's not used anywhere it just knows that something was changed and we need to re-render everything in this case if we want to prevent this from re-rendering what we would need to do is opt out of reacts reactivity system in contrast to view where you opt into the reactivity system in react sometimes you need to opt out especially if you have an expensive computation this computation is obviously very cheap but if it was more expensive you could incur a performance cost so what you would need to do is opt out of reactivity and the way you do this is kind of the opposite to view what we need to do is say use memo this is going to only update based on an array of dependencies that we pass in in this case I might just say count in this case now it's only going to change when count is changed and if we did everything correctly we should see the correct Behavior this time around let's go ahead and give this one a try I'm actually getting an error here which is not what I would expect because I need to return a value save it off and try it out if we go ahead now and click on this one we can see nothing is being changed and the reason for that is we've opted out of reactivity at least based on this count 2 variable we're only going to react when count is being changed so these applications now have parity again interestingly enough no matter how many times we click here we're still going to see that same console log and this does make sense we're still going to re-execute all of this code we're just not going to reactively update the Dom unless one of the dependencies of now has changed which in this case it hasn't we do still get the console log of course this is not the case in view you can see there's no console log whatsoever so we've seen the two differences here between the reactivity systems react emphasizes a deterministic functional based approach of wedding mutation and view is the opposite we use mutation everywhere we opt into reactivity and this gives us a more fine-grained and granular result uh both of these have very similar performance so there's not really a better or worse it's just two different philosophies and different ways to approach the problem of creating complex reactive user interfaces if you did enjoy this content I do have a book that does similar philosophical deep Dives about vue.js I'll leave a link to that in the description so go ahead and check it out that's all I've got for you today so I will see you in the next lecture

Channel: Lachlan Miller

Views: 20,117

Keywords:

Id: zROpI35swtg

Length: 10min 26sec (626 seconds)

Published: Thu Aug 31 2023