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.
16 episodes•1 hr 17 mins

Overview

How do you render one million checkboxes in a browser and keep them synced in realtime?

Well, using a combination of virtual scroll rendering, Redis bitmaps and bi-directional WebSocket communication.

Let’s cover each of these concepts to build up this fun project — you’ll be surprised at how useful these techniques are for your own applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!