The Easiest React Hook

Рет қаралды 64,101

Күн бұрын

Пікірлер: 72

@a2406 2 жыл бұрын

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 2 жыл бұрын

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

@devincheca9605 2 жыл бұрын

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.

@IAmLesleh 2 жыл бұрын

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 2 жыл бұрын

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

@QwDragon 2 жыл бұрын

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

@QwDragon 2 жыл бұрын

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

@ed1nh0 2 жыл бұрын

@@QwDragon good point

@CottidaeSEA 2 жыл бұрын

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?

@ДмитрийКарпич 2 жыл бұрын

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 2 жыл бұрын

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 👍

@MatthewWeiler1984 Жыл бұрын

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

@QwDragon 2 жыл бұрын

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.

@alii4334 2 жыл бұрын

straight to the point!

@theidanking 2 жыл бұрын

Love your videos!

@paulsullivan649 2 жыл бұрын

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!

@gamidakhmedov9212 2 жыл бұрын

Love your videos. Thank you!

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

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

@patrickconrad2874 2 жыл бұрын

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

@RafiesAwesomeChannel 2 жыл бұрын

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 2 жыл бұрын

Is it better than nextjs?

@RafiesAwesomeChannel 2 жыл бұрын

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

@basilhammad7447 2 жыл бұрын

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

@Ked_gaming 2 жыл бұрын

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.

@rczzyy 2 жыл бұрын

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

@whynot9963 2 жыл бұрын

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 2 жыл бұрын

I was going to mention this too.

@sojuthomas7727 2 жыл бұрын

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

@abdulmuhaimin346 2 жыл бұрын

let's go 1M 🔥

@afzalhamdulay Жыл бұрын

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

@alonh.4968 2 жыл бұрын

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 2 жыл бұрын

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

@licokr 2 жыл бұрын

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

@ChrisHaupt 2 жыл бұрын

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

@1990sankalp 2 жыл бұрын

Please make a video on react app using vite

@derpenz5376 2 жыл бұрын

Is it still possible to select those ids with css?

@Gbtx6 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

Mr. Kyle Cook is the man 😎

@i3_13 2 жыл бұрын

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

@deepn9x 2 жыл бұрын

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

@pazuso 2 жыл бұрын

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

@flowerofash4439 2 жыл бұрын

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

@QwDragon 2 жыл бұрын

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

@md.asifal-mahmud5952 2 жыл бұрын

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

@alexgonzalez85 2 жыл бұрын

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

@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 Жыл бұрын