Learn React Hooks with Typescript

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn React Hooks with Typescript in the React + TS beginners tutorial. Do you already know React and are learning Typescript? This tutorial will help you learn how to use React hooks with Typescript.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: bit.ly/WebDevMaster
- Master the Coding Interview: bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this Typescript Course: github.com/gitdagray/typescri...
🔗 Playlist for this Typescript Course: bit.ly/3GcNJ78
Learn React Hooks with Typescript
(00:00) Intro
(00:09) Welcome
(00:31) Quick Start
(00:50) useState
(04:23) useEffect
(07:04) useCallback
(12:22) useMemo
(16:27) useRef
(19:56) Running the app & review
📚 Suggested Pre-requisites for this Typescript course:
🔗JavaScript for Beginners full course: • JavaScript Full Course...
📚 React Hooks tutorials:
🔗 useState: • Avoid this React State...
🔗 useEffect: • React useEffect Hook t...
🔗 useCallback: • useCallback STOPS this...
🔗 useMemo: • useMemo Explained | Re...
🔗 useRef: • BUILD a React Timer wi...
📚 Tutorial References:
🔗 TypeScript + React Cheatsheet: github.com/typescript-cheatsh...
🔗 React Official Website: reactjs.org/
🔗 Typescript Official Website: www.typescriptlang.org/
🔗 Anders Hejlsberg, Creator of Typescript and C# Interview: dev.to/destrodevshow/typescri...
🔗 Stackoverflow Survey Results: survey.stackoverflow.co/2022/...
🔗 MDN - Static Typing: developer.mozilla.org/en-US/d...
🔗 MDN - Dynamic Typing: developer.mozilla.org/en-US/d...
🔗 MDN - Type Coercion: developer.mozilla.org/en-US/d...
🔗 TS Type Assertions: www.typescriptlang.org/docs/h...
⚙ Web Dev Tools:
🔗 Vite: vitejs.dev/
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Node.js & npm: nodejs.org/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
Was this React Hooks + Typescript tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#react #hooks #typescript

[@eleah2665]

Wow! There's a lot going on in this innocent looking 23 minutes. It forced me to wake up and think. Thanks. I'll look forward to the next one. I need all the typescript help I can get.

[@DaveGrayTeachesCode]

Glad to hear that!

[@hojinharry6270]

Loved it. I was looking for this. Documentations were not enough. Thank you

[@DaveGrayTeachesCode]

Right on!

[@yuhiahtyun5665]

Road to 100k subs, keep it going Mr.Gray. Thanks for your huge contributes to the community

[@DaveGrayTeachesCode]

Much appreciated!

[@k303k]

Thank u .I can understand it clearly

[@ravenMK_]

Always great content. Remember to keep thriving for progress over perfection.

[@DaveGrayTeachesCode]

Thank you! Striving even! 😀

[@AmarMishra]

Your content is awesome. Such practical examples . I was able to derive a lot of intelligence from it.

[@DaveGrayTeachesCode]

Glad to hear that!

[@3ab9ariclash77]

amazing thank you dave

[@DaveGrayTeachesCode]

You're welcome!

[@developedbypy]

Please make a next JS course ! & react native one really enjoy learning from this channel.

[@wiseskeshom4673]

Thank you so much for this informative video, for a beginner who just started to learn Typescript React like me, your channel is so so cool.

[@DaveGrayTeachesCode]

You're very welcome!

[@ahmad-murery]

I've been so exhausted recently and I feel like I need to thank you for this refresher, 100K is getting closer 🚀⭐ Thanks Dave

[@DaveGrayTeachesCode]

You're welcome, Ahmad! Good to hear from you and thank you for joining me on this journey! 🚀

[@ahmad-murery]

@@DaveGrayTeachesCode and what a nice journey, I hope things will get better soon so I can give something in return (although it seems very unlikely) Be sure that I'll watch and like your videos even if you don't see me in the comment section. Sincerely yours

[@digitnomad]

by far the best illustration, i would like to see if you can mix useReducer, useSelector and useContext all together with above video. that will be complex. I think you can, and this will beat Ng and Vue since they are not even close to what React can do today.

[@MrSoquin]

Explanations are so clear, I understood everything on the first try!!! Also, it seems that you do not explain what useRef does specificaly but, on the other hand, I have google. Great video!

[@DaveGrayTeachesCode]

Thank you! useRef video here: kzbin.info/www/bejne/qWe4cqh8r7FmZpo I think you can search my channel for videos by using my channel homepage, too. 💯

[@SuperShivammm]

Good explanation with typescript in easy way. Thanks

[@DaveGrayTeachesCode]

You're welcome!

[@michaelscofield2469]

omg, you are the best, what is the next subject of your video?

[@DaveGrayTeachesCode]

Thanks Michael! I mention near the end of this one :)

[@sonamohialdin3376]

Amazing tutorial thank you

[@DaveGrayTeachesCode]

You're very welcome!

[@bobbyboxer2664]

Like 👍🏼 just because of that extension recommendation 🔥 now I’m going to continue watching the video which is already great

[@DaveGrayTeachesCode]

Glad to hear it!

[@hosamgnaba3205]

Great video Dave, I wish I had someone explained react hooks like that to me when I first started, it would have been much easier for me , thank you man Remember to keep striving for progress over perfection ..... :)

[@DaveGrayTeachesCode]

Glad it was helpful!

[@hanzladev]

one thing you must know, no matter how good teacher you get at time first time learning, you will still learn something new after believing you have master something, I value author great efforts, you wouldn't have praised him if you haven't watched basic things year before, think of it as required step, even if I learn first time from this video and after year watch new explanation I will get more understanding and I will feel this is much better then from where I learnt earlier. its gradual process no one can deny :)

[@hosamgnaba3205]

@@hanzladev Nevertheless, the man is doing really great job for free... and even when i watch things that are really advanced explained by him i still understand every little thing he explaineds

[@hanzlaahabib]

@@hosamgnaba3205 from no angle I have said bad about auther, I have huge respect for him because of his efforts But my POV was different in above point, I don't you understood that

[@philippearras8154]

Thank you !

[@DaveGrayTeachesCode]

You're welcome!

[@7doors847]

We are ‘hooked’ on Dave Gray!!🪝

[@DaveGrayTeachesCode]

I see what you did there! 😆

[@viniciusm.m.7822]

Thanks!!

[@DaveGrayTeachesCode]

Welcome!

[@islombekdev]

Dave, you are one of the best tutors. Keep it up!

[@DaveGrayTeachesCode]

Thank you! 🙏🙏

[@yustinayasin5539]

thanks for the explanation! how about set state of the user inside use effect? i'm struggling to match the type because the data that i want to pass into the state come from an API

[@Salah-YT]

thank u so much

[@DaveGrayTeachesCode]

You're welcome!

[@eduardoviscencio489]

Great way to explain and great extension! Do you have any video on the channel explaining in which cases to use type or interface? Thanks

[@DaveGrayTeachesCode]

That's a topic up for debate as both type and interface work. I find myself using interface for classes and type for most everything else.

[@World_of_motivation_5]

Dear Sir advance congratulations for 100k . You are very hard working man ❤️❤️😊❤️😊.

[@DaveGrayTeachesCode]

Many many thanks!

[@abdulazeez.98]

Amazing content as always! Few days away from 100K 🔥🔥

[@DaveGrayTeachesCode]

Thank you!

[@iamprincemuel]

Hi Dave. Awesome video and detailed explanation as always. I already know and use Typescript, but I still gained a lot from this tutorial. Please I'd like to know the name of the vscode extension you used to change the case of the useState variables automatically. Thanks

[@DaveGrayTeachesCode]

Thank you! I made a quick short about the VS Code extension you want: kzbin.infozDiJpqVbszk

[@michalnowak2181]

thx

[@mohammadjavadaghazadehfard7873]

Hi Dave, Thanks for your great tutorials. Please make more videos, especially advanced examples. Good luck. Also, What is the theme of your VSCode in this video?

[@DaveGrayTeachesCode]

You're welcome! Here is a short showing my theme: kzbin.infodp4u1NNFhtE

[@mohammadjavadaghazadehfard7873]

@@DaveGrayTeachesCode Thanks. Also, I suggest you try Ayu Mirage Theme. I think it is very good.

[@okonkwo.ify18]

I already know this . But I still need to get a cup of coffee and enjoy your tutorial on this topic cos I know ama learn new stuff

[@DaveGrayTeachesCode]

Thank you! ☕

[@learn029]

You are number one.

[@DaveGrayTeachesCode]

🙏🙏

[@shahhussain56]

Amazing video sir. Would you please give me the extension name for highlighting the closing bracket in your video?

[@DaveGrayTeachesCode]

Here you go: kzbin.infoMDaxWffMjrQ

[@kirakira160]

Gold man

[@wesleyowen904]

I really like your videos and I was wondering if you can do a full stack app in flutter?

[@DaveGrayTeachesCode]

Thanks for the request! I have not covered any Flutter here yet. Maybe one day!

[@johnmcaulay4348]

Haha I said you were going to make it to 100k this year...you've got this! :)

[@DaveGrayTeachesCode]

Thank you! 🚀🚀

[@mhdfirassbarakat6587]

what an effort dave .... thanks to you now I understand typescript but I have a question related to this video, please (e: MouseEvent | KeyboardEvent) why did you use this? what is the case that will make me use such a thing thanks a lot

[@DaveGrayTeachesCode]

A button can be clicked with a mouse or pressed with a keyboard. This just provides the event type.

[@waltergermanes4528]

When to use type and interface?, What's their difference? Thanks in advance🙏😊

[@DaveGrayTeachesCode]

You will find conflicting answers as it comes down to preference. However, I do find using interfaces to be useful when working with classes. Most of the time, I reach for type.

[@imam_robani]

Can you explain when to use interfaces and when to use type?

[@proletar3799]

there is depend on what u want in further with ur types, basically u can use both of them at same time. but slightly different are when u have two interfaces and wanna to merge them. with interface. e.g : interface IOne { name : string } interface ITwo extends IOne // interface ITwo implementsIOne {} { age : number } interface is more or less like a class form. with type ; type TOne = { name : string } type TMerge = TOne & {age : number} // or u can type with union, intersection ,and so on

[@DaveGrayTeachesCode]

This is a debate that even some of the TS gurus go back and forth on. The React + TS cheatsheet linked in the description addresses this here: github.com/typescript-cheatsheets/react#types-or-interfaces

[@imam_robani]

@@proletar3799 thanks bro

[@imam_robani]

@@DaveGrayTeachesCode great, thanks

[@proletar3799]

@@imam_robani sama-sama bro, semoga membantu sedikit.

[@ToniLiem]

its just a matter of time before you get more subs and becoming more popular

[@DaveGrayTeachesCode]

Thank you!

[@mustafaebid3800]

Why does automatic subtitles no longer work in videos?

[@DaveGrayTeachesCode]

I don't know, but that is frustrating. KZbin has been making changes, but surely, they would not remove a feature that makes content more accessible. Maybe they are working on something.

[@mustafaebid3800]

Thanks for everything you give us

[@khitibhusannaik1471]

Strapi starts soon....

[@TravinskiyVladislav]

What i should be say again? Right, thank you, Dave

[@DaveGrayTeachesCode]

You're welcome!

[@Web-Himansu]

Sir after i completed you web development course can I get job.

[@DaveGrayTeachesCode]

Keep learning. One course likely won't be enough. In this industry, I am constantly learning. Just keep going.

[@michaelsaucedo3952]

Check out Dave's shorts video on case preserve and camelCase preserve. Thanks for the tip. I always wondered.

[@DaveGrayTeachesCode]

Welcome! Link: kzbin.infozDiJpqVbszk

[@codefinity]

Did he explain why he switches between `type` and `interface`?

[@DaveGrayTeachesCode]

I usually use interface for classes. Otherwise I stick with type.

[@daueryuri2569]

this video are helpful but please use an english basic. at least thx for your good work