Generating Unique Keys on the Client

[00:00:00]
>> Before we move on, though, what I do wanna cover, there was a question in the chat, which is actually a great one regarding how do you actually generate unique keys on the frontend? And so, to be clear, so the thing that I've shown you over this workshop, let's see, if we take a look at here.

[00:00:16]
Okay, Line 32. As you can see, this is something that I've cobbled together myself, right? I'm using ES6 template literals to say I'm gonna guess at a unique data type, which is user, and then I'm just gonna attach the ID to it, even though I know the ID is kind of not as unique.

[00:00:31]
And so, this works, I think, when you're just prototyping and working on things, but obviously on an enterprise grade application that becomes a very different matter, right? Because user, like you're all of a sudden contingent on the fact that someone made the right choices to scope the name correctly.

[00:00:44]
And that's not something we ever wanna rely on in terms of reducing human error. So when it comes to actually generating unique IDs granted, ideally, your backend is doing that for you. But in the event you're not actually getting that information, the npm module I'd really highly recommend is the uuid module.

[00:01:03]
And so, basically how it works is you'll install UUID on your project, and you basically, as you can see here, you import it at the top of your file. And then as part of like creating the new form, so actually this does happen a lot if you're creating like on the frontend side, especially, creating new data that you might be sending to the backend.

[00:01:21]
So you might actually have a case where I'm gonna just pseudocode this, we're not gonna install it because that will just add to the bloat. But for the sake of demoing this, let me just go ahead, and at the top here. So you can imagine that, what we would do is we would say, we've copied this line to say, okay, we want to use the uuid library.

[00:01:40]
And then again, assuming we had a new method called, add, why is that doing that? Okay, addNewUser(), you could then say this.UserList.push(), and when you create a new object, this is where you're gonna go the ID is going to be, [SOUND], uuidv4 run like this. And then, typically, you probably would have some new user object that you have in your reactive data, that contains like name, again, let's say Ben.

[00:02:09]
And so, what I typically do, is I just spread out everything from this.newUser(). And then I basically override, in case there's any IDs that are attached to it, this ensures that it's being generated on the fly. And then that's basically how I would approach generating a unique ID on the frontend.