‫So after using a ref to select a dumb element
‫in the previous lecture, let's now focus
‫on the other use case of refs
‫which is to simply give us a variable that is persisted
‫across renders without triggering a re-render.
‫So let's just search for some movie here.
‫For example, this amazing classic "Back to the Future".
‫And so now let's say that behind the scenes
‫of this application, we want to count how many times
‫the user selects a different rating.
‫So for example, let's say first I rate this three,
‫then seven, and then nine.
‫So this means that it took me a long time to decide
‫between the right rating of this movie.
‫And so let's say that
‫in our application we somehow wanted to register that.
‫Now I said behind the scenes
‫because we actually don't want this data to show up
‫on the screen.
‫So basically we don't want
‫like a counter anywhere here in the app
‫which tells us how many times the user has clicked here.
‫So again, it should happen behind the scenes.
‫And so this time what we need is a variable
‫that is persisted between renders
‫but that does not cause a re-render when it is updated.
‫And so a ref is a perfect use case for this.
‫So let's then come here to the movie details component
‫and let's create ourselves a new ref.
‫And I like to do that right here after the states.
‫So let's call this one here, countRef,
‫and then again use ref.
‫And then just like with useState here we pass
‫in the initial value of that variable.
‫And so in the beginning, the count is of course at zero.
‫All right?
‫And so now the idea is
‫that each time the user gives a new rating,
‫so by clicking here on one of the stars
‫this countRef ref should get updated so that then
‫when the user actually adds the movie to the list,
‫we can then add that here to the new watched movie object
‫so that we can then finally store that value somewhere.
‫So that count that we're going to create here
‫but first let's not take care of actually updating the ref.
‫And the way we do that is again, using a useEffect,
‫because remember that we are not allowed to mutate the ref
‫in render logic.
‫So instead we need to use a useEffect.
‫Okay, and when do we want to update the ref?
‫Well, each time that the user rates the movie again.
‫And so that's each time
‫that this piece of state here updates.
‫Okay.
‫And so now all we want to do is to take our account ref
‫and then manually mutate the current property.
‫So we can say that countRef dot current
‫should be equal countRef dot current plus one.
‫Okay.
‫And actually this updating here should only
‫happen when there already is a rating
‫because the effect will also run on mount
‫and so then it will already add plus one here
‫even without the user having rated.
‫So let's just say if there is a user rating
‫which in the beginning is not
‫because it'll still be this empty string.
‫Okay.
‫So again here we imperatively,
‫basically updated this variable.
‫So with a ref, we don't have a set function
‫but instead we simply mutate the current property
‫which is in the ref.
‫And so that's why we say
‫that a ref is basically like a box that can hold any value.
‫So we could, for example, also,
‫instead of just storing the count here,
‫store all the different ratings that the user has given
‫in an array.
‫So that would also be perfectly possible.
‫But anyway, let's then now come here
‫to the function where the new movie is actually added
‫to the watch list.
‫And here,
‫let's then create a new property countRatingDecisions.
‫And so this should then be equal
‫to the countRef dot the current property now, right?
‫And that's it.
‫So this should now already be working.
‫So let's test it out here.
‫Let's just make sure to reload.
‫All right.
‫So let's count how many times we click here.
‫So let's say first we think the movie is a seven
‫then maybe, ah, maybe it's a nine
‫but then we think even better.
‫And then we come to the conclusion
‫that it's actually an eight.
‫So we decided three times here.
‫And so let's now add this to the list.
‫Now in order to check out if this actually worked,
‫let's come here to our app.
‫So where we have our state so that
‫in there we can then see if the value was correctly set,
‫because of course we are not rendering
‫that new value anywhere here.
‫So here it is.
‫And indeed, countRatingDecisions was was set to three,
‫which are exactly the three times
‫that we clicked on a different rating.
‫Nice.
‫So let's just recap what we did here
‫and why this works.
‫So we created this ref here where we want
‫to store the amount of clicks that happened on the rating
‫before the movie is added,
‫but we don't want to render that information
‫onto the user interface.
‫Or in other words, we do not want to create a re-render.
‫And so that's why a ref is perfect for this.
‫So then each time the user rating was updated,
‫the component was re-rendered.
‫And so then after that re-render, this effect was executed
‫which means that after the rating had been updated,
‫then our ref would be updated as well.
‫So we would update the current property
‫to simply adding one.
‫So we can actually make this a bit simpler.
‫So just like this, or even,
‫could even do this.
‫So this works just in the exact same way.
‫And so then we just used the countRef dot current property
‫later down here whenever we create a new object
‫to be added to our list.
‫Now of course, if we tried to do the same thing
‫with a regular variable, then that wouldn't work.
‫So let's try that also.
‫Let's say count.
‫So just count equal zero.
‫And then, so let's just do the same thing here.
‫So if user rating, then count plus plus.
‫And then here we also need to add count
‫which for a ref we do not.
‫And then let's just add that count here.
‫So then we will see that this doesn't work.
‫So let's reload.
‫Let's empty this entire thing.
‫Okay, so clicking 1, 2, 3, 4 times now,
‫add to the list.
‫And then again we come here to the state.
‫So once again, really, really helpful
‫to have these dev tools.
‫And then we see that we have four countRatingDecisions,
‫but the count here is only at one.
‫And so this one is basically just the last click
‫that happened.
‫So the let variable, which is just a simple variable,
‫is of course reset after every re-render.
‫So it's always going back to zero.
‫And so then when the last click happened
‫that zero was here, increase to one
‫and then that count was added to the object.
‫So in conclusion, this normal variable is not persistent
‫across renders, and it doesn't trigger a re-render.
‫On the other extreme,
‫we have state which does both of these things.
‫So triggers a re-render and it is persistent.
‫And then in the middle we have a ref
‫which is indeed persisted across renders
‫but it does not trigger a re-render when updated.
‫And so that's why we normally don't use a ref
‫in the JSX output.
‫All right.
‫So this was really just to drive home the message
‫how refs are different
‫from both states and also from normal variables.
‫Okay.
‫Now, we still have some problem.
‫We still have to count.
‫Ah, here it is.
‫So forgot to delete this one.
‫Okay, and later on we will even see some other
‫more real world use cases of refs, for example,
‫storing the ID of a timer to stop it.
‫But for now, I hope that this use case
‫of a ref also made sense to you.
‫And we don't use refs all the time
‫but it's still good to know how they work
‫and to keep them in the back of your mind.