The Easiest React Hook

FREE React Hooks Course: courses.webdevsimplified.com/...
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:
FREE React Hooks Course: courses.webdevsimplified.com/...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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

[@a2406]

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!

[@jonathanstanelle4607]

I 100% agree, and would recommend folks to sign up To Kyle’s emailing list. It Comes with a lot of insightful tips that every developer should at least be made aware of

[@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: document.querySelector("#\\:r1\\:")

[@ed1nh0]

I was going to say that, but I don't get the point why React team did that, I mean adding double colon

[@QwDragon]

Colon can be replace by it's code. I have a video about it.

[@QwDragon]

@@ed1nh0 I think, they simply wanted to prevent conflicts with normal ids on the page.

[@ed1nh0]

@@QwDragon good point

[@CottidaeSEA]

Aren't you supposed to use single backslashes to escape the character? I've never had to do that before in JS, so I'm not sure. Because \\ would escape \, no?

[@paulsullivan649]

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!

[@devincheca9605]

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.

[@MatthewWeiler1984]

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

[@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.

[@gamidakhmedov9212]

Love your videos. Thank you!

[@theidanking]

Love your videos!

[@alii4334]

straight to the point!

[@user-hn1ph6ry8l]

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.

[@rjcoder24X7]

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 👍

[@patrickconrad2874]

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

[@sojuthomas7727]

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

[@RafiesAwesomeChannel]

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

[@Peter-yd2ok]

Is it better than nextjs?

[@RafiesAwesomeChannel]

@@Peter-yd2ok By design yes, it's much faster. By support no, you are trailblazing by using it

[@whynot9963]

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

[@robertbornschein5583]

I was going to mention this too.

[@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.

[@ChrisHaupt]

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

[@deepn9x]

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

[@abdulmuhaimin346]

let's go 1M 🔥

[@1990sankalp]

Please make a video on react app using vite

[@pazuso]

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

[@basilhammad7447]

can u please explain the difference between rendering and hydrating in react

[@Ked_gaming]

rendering is building the html element that make the page, hydration is adding the data you want to display. Sometimes the data is static so you don't need to hydrate the page, but most of the time you hydrate by calling an API or something.

[@joemaffei]

I understand this is a contrived example, but you could solve this in pure HTML by ditching the id and htmlFor attributes, and having the input be a child of the label element instead of a sibling.

[@joemaffei]

Email

[@afzalhamdulay]

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

[@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.

[@rahulreddykatkuri9431]

How to concatinate two input values while typing if any one know please tell me the answer

[@alonh.4968]

Isn't the querySelector error because you did ":r1:" and not "#:r1:"? Edit: nvm I just tried it and it's still not working.

[@IAmLesleh]

You have to escape the colons with double backslashes like document.querySelector("#\\:r1\\:")

[@licokr]

I also wondered, I tried it and I found that document.getElementById(':r1:') works.

[@i3_13]

How do you those random ids if you don't know the correct id?

[@flowerofash4439]

What's the other use case other than label input?

[@QwDragon]

Label for an control. And id of the form if you want to bind control placed outside of the form to it.

[@derpenz5376]

Is it still possible to select those ids with css?

[@Gbtx6]

you should be able to because by the time you can see in on the console it is part of the DOM already if im not mistaken.

[@IAmLesleh]

You can select them in CSS if you escape the colons with a backslash like #\:r1\: { … } You can still select them with JS too with document.querySelector("#\\:r1\\:")

[@QwDragon]

Yes, you can escape colons by writing their codes. Same with querySelector. I've shown querySelector in my April's video, but haven't shoun css. Anyway, css selector will be the same as for querySelector, except you don't need to escape backslash for the code.

[@maskman4821]

Mr. Kyle Cook is the man 😎

[@jason_v12345]

The performance overhead of calling useId is effectively zero.

[@jason_v12345]

I think the querySelector failed only because you didn't put a # in front of it

[@mpowereer6992]

can we get video about firebase auth with redux? it would be nice :D

[@flowerofash4439]

I smell high number of views

[@md.asifal-mahmud5952]

I am not getting the last point. Why htmlFor={`{id}-email`} and id={`${id}-email`} is better than htmlFor="email" and id="email".

[@alexgonzalez85]

From what I understood... I think the hook helps you when the component is used multiple times. He showed how the same form was used at the top and bottom of the page. If you were going to use just id="email" then you will get two input elements with the exact same id, the hook generates different id's so you don't have to worry about repetition :P

[@belkocik]

Is a scenario that there are 2 inputs with the same id? LOL :D

[@BharatPatodi]

If we''re manually making each id a different one, why not avoid `useId` altogether and simply provide id names to elements manually?

[@TeeFoles]

couldn't you just pass in an Id as a prop?

[@BongProgramiz]

Bro make a nextjs course

[@ygormartinsr]

Up

[@clydegrey5060]

It's difficult to select with querySelector but not impossible. You have to do it this way: document.querySelector('[id=":r7:"]')

[@UsagiYiiY]

Hey @WebDevSimplified can you help me in something?