One Million Checkboxes with Laravel
This episode is for members only

Sign up to access "One Million Checkboxes with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
05. Reacting to state changes

Episodes

0%
Your progress
  • Total: 1h 17m
  • Played: 0m
  • Remaining: 1h 17m
Join or sign in to track your progress

Transcript

00:00
Another issue that we're going to come across
00:01
is reacting to any changes to the checkboxes within this items variable. Now, ideally, what we would do is we would make this a ref. And then when we went ahead and changed anything,
00:13
the scroller would update to reflect the new check status. What we're going to do in this episode is convert this to a ref first of all, see how it does. And then we're going to look at just including
00:24
a little button on the page that we can click to set any of our checkboxes to a status of checked and see this react. Okay, first things first, let's change this over to a ref just to see what happens.
00:39
Now, if we go and give the page a refresh here, you can see that we'll get a little delay. In fact, it's probably almost going to crash, but let's have a look.
00:48
We get a delay here with this loading and yeah, it's probably going to crash. So essentially putting all of these items into a ref is just not going to work.
01:00
But when we change the check status of any item, either when we change it on our end or when this reacts to a real time event, how do we get things to update?
01:10
Well, let's go ahead and get rid of that ref and just make sure that we haven't completely crashed this. It's nice and fast at the moment and this is what we want. Okay, let's go and create out a function
01:21
that is going to change over one of these values and just toggle one of these values. So let's say set items state or checked, whatever you want to call this.
01:31
And for this, we're going to need to know the ID. This is going to be a really useful function because when we get a broadcasted event with an ID and the check status,
01:39
we can just go ahead and update this. So we want to go ahead and for each of the items, take the item ID and remember we're working with a zero indexed array here,
01:50
but with an item ID starting from one here. So we're going to need to subtract one from the index and we're going to set checked to the checked status that we want to see.
02:00
Now that's normally all we would need to do if we'd be using a ref. Let's go ahead and invoke this and see what happens. So let's create out another container up here
02:10
and I'm just going to add a button to toggle one of these. So let's say be on click and we will set the item of one to true. Okay, let's go ahead and see what happens.
02:22
So when I click toggle, nothing happens. Now the reason for this is that the checkbox list is now or the scroller is not being re-rendered because it can't react to a plain variable.
02:35
Now interestingly, when we hover over this, it does react. So whenever there's any kind of scroll or hover event on here, it will go ahead and re-render. Now that's not what we want
02:46
because we don't want the user to be having to constantly move their cursor or constantly scrolling for this to be re-rendered. So a little trick that we're going to use,
02:55
this isn't the ideal solution and there are other solutions to this but we're going to set out a render key and this would normally be used like an index
03:05
in a list of items when you're iterating over them but we're going to set this to the current timestamp. What that will do is when we attach it to our scroller, it will always re-render
03:17
whenever this value's changed. So let's go ahead and create this up here now. So we've got these down here. Let's pull these up to the top here
03:25
and let's go and create out a render key. And this is just going to be a ref with the current date and timing. So we can just say date.now
03:33
and we can attach this render key to our scroller. Let's try it on our scroller first and see what happens. So let's set the key that we would normally set when we're iterating over something to this just here.
03:46
And then whenever any kind of state changes, we're going to reset the render key to the current timestamp. So let's say date.now.
03:55
Doesn't feel great but this is going to get this to work. Okay, let's go over and without hovering over this, let's go and hit toggle. And as you can see, the state is now updated.
04:06
So what's happened is Vue will have detected that that key has changed and it will force a re-render of all of our checkboxes. So this is now working really nicely.
04:17
It's unfortunate that we can't use a ref because then this would happen automatically but this is just a workaround for something of this scale so we can re-render that list of items.

Episode summary

In this episode, we tackle how to react to changes in the state of checkboxes in a Vue app—specifically, making sure updates actually get reflected in the UI when the checkbox data changes.

We first experiment by turning our list of checkbox items into a ref. At first glance, that seems like a logical approach, but performance quickly goes downhill—in fact, doing this can almost crash the page due to how Vue tries to keep track of everything. So, that's a no-go for our use case.

Next, we refactor so that when an item’s checked status changes (either by the user or via some event), we have a dedicated function to update that state for a given item. We add a button to the UI to test toggling a checkbox's checked state programmatically, but we notice that nothing appears to change. The UI only updates if we interact with the component (like hovering or scrolling), which obviously isn’t ideal.

To make the UI update immediately, we use a handy trick: manage a special renderKey ref that's tied to the current timestamp. By attaching this key to the scroller component, we can force Vue to re-render all the checkboxes whenever any item is updated. It's not the most elegant or scalable solution, but it gets the job done and is a good workaround for this particular scenario.

So by the end, we’ve learned both what doesn’t work, and a simple workaround to keep the interface in sync when things change behind the scenes.

Episode discussion

No comments, yet. Be the first!