The Easiest React Hook

The useId hook is a very simple hook that serves one purpose, but it does that one thing very well. This hook was introduced in React 18 and mostly overlooked due to the other more widely used hooks that came with React 18, but that does not mean this hook is useless. This hook is the perfect hook for creating random unique ids in your component and is the easiest hook in React to learn.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:30 - Why this hook is needed
02:25 - How to use the useId hook
04:03 - querySelector gotcha
05:08 - How to use the useId hook with multiple ids

#React #WDS #useId

[a]

You're my official web development mentor: clear and thorough examples with super smooth delivery. When I need to quickly check something or learn a new concept, I always resort to this channel. Keep up the good work!

[devincheca]

You mentioned some good points for this. Another console warning I might add to further illustrate the point is with the starting example, the browser console will complain that two elements have the same id.

[MatthewWeiler]

Thank you, that is a really useful hook.
I'm going to start using that ASAP :)

[paulsullivan]

Awesome tip! I've found myself appending an index to mapped items, which worked fine for me, but would not work in a scenario like this. Thanks!

[rjcoderX]

Nice job Kyle,
You are really doing the web simplified.
I humbly request to you please create a redux course section to simply the concept of react redux.
Thanks 👍

[hnphryl]

Just a perfect explanation, thanks! When I read docs to React I get 1/10, but with this video, all is clear and I don't forget about this future.

[QwDragon]

Created id can be directly used in getElementById and in case of proper escaping it can be used in querySelector too.
I've posted video about that on my channel 4 monts ago.

[IAmLesleh]

The query selector call was incorrect, you have to use a # character to indicate ID.

You also have to escape the colons with double backslashes so this works:

[sojuthomas]

Thanks kyle.but in this example you can pass ID as a prop to the component right ?

[patrickconrad]

Ohhh nice this seems nice for using map() that requires a key in React too. It's a built in uuid generator right?

[rczzyy]

The document.querySelector() should've had a '#' tag on it because it's an id, right?

[gosnooky]

I can count on one hand the number of times I've needed to use an id field in React. If you nest your inputs inside label, you don't need the id or htmlFor attributes.

[RafiesAwesomeChannel]

Make a video on the new Fresh framework from Deno! I am currently working on converting my old react/firebase site into Fresh

[ChrisHaupt]

I guess that can be used to generate a key for .mapped components?

[afzalhamdulay]

so the values are random, then how can we give css to it or store the value of that input box in backend?

[deepnx]

@Web Dev Simplified Hello. I have idea. Do you can clone orgchart js?

[pazuso]

Are there any use cases for useId in React-Native?

[HarryRossides]

It is important to note the difference between "unique" and "random". The requirement here is that the ids are unique, which means that using random numbers actually introduces a logic error.

[whynot]

This might find some use cases in the future, but if I am going to write `${id}-email` I might as well write id="emailInput". It is solving an issue that doesn't exist. I have been using react for 6years now, only time I have used ids is when changing style of some 3rd party library

[sankalp]

Please make a video on react app using vite