Mastering React Hooks with Typescript
Переглядів 99,744
День томуLet's dive DEEP again into Typescript but this time to look at React Hooks.
00:00 Introduction
00:15 Creating the project
02:25 What hooks we will cover
03:10 useState
08:50 useEffect
14:45 useContext
24:12 useReducer
32:04 useRef
35:06 Custom hooks
43:44 useMemo
47:37 Components: Exporting Props as an interface
50:02 Components: Generic components using const
54:13 Comments and questions, subscribe and take care
Cheatsheet: github.com/typescript-cheatsh...
Code: github.com/jherr/ts-hooks
If you liked this video, buy me a coffee! www.buymeacoffee.com/bluecoll...
Hope you folks enjoy this!
👉 If you enjoy this video, please like it and share it.
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Weekly free newsletter: www.jackherrington.com/subscr...
👉 Discord server signup: / discord
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 Build a KK Slider Slider: • Build A K K Slider Sli...
Thank you for watching this video, click the "SUBSCRIBE" button for stay connected with this channel.
Subscription Link: bit.ly/2E7drfJ
#reactjs #typescript
@jejunegamingtv1359 3 роки тому
Please keep these React Typescript tutorials coming! Really appreciate it :)
@sundeeppeethala312 3 роки тому
Keep joing on Jack, Please do an end to end E-commerce or Dashboard Project on React, Redux with Typescript... It will be so much helpful to us...
@ChillAutos Рік тому
Its so refreshing to have someone who uses typescript by default. I realise JS still gets more views, but your typescript videos are amazing.
@themashcodee 2 роки тому
I love it man how smoothly you explained everything. Thank you I really appreciate it.
@tripperoafull 3 роки тому
Great video Jack, very useful.. Keep sharing videos with TS, remember TS + Expressjs with validators, it will be awesome!
@aflaccoseagulls2947 Рік тому
As someone who is learning TypeScript with React myself, this tutorial was the first I've found that gave great, helpful examples of states and how different components can interact with them. Thank you so much for this!
@petecapecod 2 роки тому
Wow everything makes so much more sense now. Thanks so much for this video 👍🏻
@sabrinareyes6134 3 роки тому
Thank you so much!! I have an interview soon and this helped me refresh my knowledge of the foundationals.
@yerson557 2 роки тому
Hey Jack I'm doing my transtion to TS with React and I want to say Thanks! This is being really helpful for me during this process.
@joseubaldocarvajal6472 3 роки тому
Didn’t know how to use an existing plain Vanilla JS object as schema to TS. I’ve learned something new today. You’re the best.
@hadibakhshi5506 2 роки тому
Oh man, thanks a million. Keep up making react typescript videos I do appreciate you
@sinaukode 2 роки тому
I like how you explain the concept by implement it first, thanks this is so good
@iliaposmac8672 3 роки тому
So cool, mostly liked props as an interface.
@piyushaggarwal5207 Рік тому
Loved the video. Thanks Jack!
@Fatima-ie5kj 3 роки тому
I *Glad* found this channel & thankyou so much for providing quality content for free looking forward for more:-)
@nemanjadjoric8765 2 роки тому
Just what I needed for my job interview. Thank you so so much !!! You are awsome !!! (and you got a timestamps :)). Great !
@skweezy97 3 роки тому
You're a g for this one. Thank you!
@FrancescoStrappini Рік тому
Did learn more about react and ts with this video than and entire (paid) udemy course .... thanks
@geneartista9714 2 роки тому
This man deserves a gold play button
@phuocquang2314 2 роки тому
Thank you so so much sir, as a junior front end developer, your videos help me a lot, thank you!
@lukerhoads 3 роки тому
I love these tutorials, keep em up Im subbed for life
@Khushpich 2 роки тому
Definitely best typescript channel on youtube
@caleblovell 3 роки тому
This was really great. I converted some context providers using useReducer to TypeScript a while back, and set a bunch of types to any because I didn't want to figure it out. This made it very easy! Thanks!
@jherr 3 роки тому
Happy to help!
@TrippleMYouAlreadyKnow 2 роки тому
Thanks so much for the awesome lesson!
@hamzahmd_ Рік тому
Thanks for your tutorials.
@nottiredofwinning3736 2 роки тому
Learning lots of new stuff here, thanks!
@adam.k8222 2 роки тому
Thank you a lot. It really helped me!
@hmacccc 2 роки тому
This is great stuff. Surprisingly not a lot of content on the integration between TS and React out there; this is easily the best I've seen.
@morning_latte 2 роки тому
I agree, there is a very large amount of general React courses out there and a lot of courses on TypeScript, but hardly anything about using the two of them together. Really appreciate Jack's content!
@mmmmmmm8706 3 роки тому
This is so helpful. This is great!
@mahdisaeidi1675 2 роки тому
Absolutely fantastic! Tnx!❤❤
@accsuperstar 2 роки тому
You are an excellent teacher!
@jose6183 2 роки тому
You put out incredible content. I hope you get all the recognition in UKposts this content deserves. Thanks for all
@jherr 2 роки тому
Thank you!
@topul5195 2 роки тому
helps so much, thank you!
@mmmmmmm8706 2 роки тому
Custom hook was great. Would love too see the beers in a table and doing column filtering via the custom hook. Great base overview of the hooks, plus typed!
@vin2629 Рік тому
Thanks for this. I thought may be you should have explained a bit more on useRef, useMemo, useCallback. There are tons of videos on that anyways. But I loved the way you used interfaces and generics. That’s pretty cool. Custom hooks are also explained cleanly.
@firebird77 2 роки тому
Fantastic content!!!
@piotrles6209 3 роки тому
Very helpful guide, Really appreciate it :)
@kirillpavlovskii8342 2 роки тому
Thanks Jack !
@danieljing9319 3 роки тому
very useful tutorial , thanks
@francis_n 3 роки тому
Just realised Jack sounds like Principal Skinner and Smithers from The Simpsons. Close your eyes and listen. This is a great video by the way 👍🏾
@jherr 3 роки тому
Hahaha. :P I think I'll take that comparison to being compared to Trump, which happened on one of my Traversy videos.
@francis_n 3 роки тому
@@jherr Oh God no! Could never compare you to that fiend my friend. Anything Simpsons is a compliment. But seriously your voices are similar....In my ears
@jherr 3 роки тому
@@francis_n no worries at all. I actually do a half decent professor frink. 😁
@francis_n 3 роки тому
@@jherr Now that I have got to hear 😊
@jacqueskorb879 2 роки тому
Thank you so much!!!!
@yewtree8 Рік тому
Thank you so fucking much for this no BS breakdown I've been working with this stuff for months and all the silly things finally clicked for me. So much love
@josephwong2832 2 роки тому
awesome tutorial ! subscribed.
@_hugo_cruz Рік тому
Thanks Jack!!! 🫶
@younessfathi1739 3 роки тому
Great, thank you very much
@danielgaliziani2401 2 роки тому
Great lecture!!!!!!!
@pablogonzales1092 3 роки тому
thanks to you I'm understanding typscript, thanks!
@jherr 3 роки тому
That's awesome! Thank you!
@sagarreddy7461 2 роки тому
you killed it jack
@yulianaaldrich2802 2 роки тому
Thank you for the explanation! Could you do one accessibility content using hooks?
@mainendra 3 роки тому
Downside of const is if you are using react chrome extension and check the component tree you will see Anonymous component instead of component name. To fix that you have to set the displayName property of that constant. 😀
@SwiftySanders 3 роки тому
Thanks for this. Good point.
@sebastianmosneagu2635 2 роки тому
You would make a fantastic teacher.
@m2tdev 2 роки тому
Thank you Jack :)
@CrayTechTV 3 роки тому
fantastic
@yannicknana 3 роки тому
Nice tutorial
@ankitmehrotra8519 2 роки тому
Fantastic..
@leonardorodriguessucena8379 2 роки тому
Keep up with the GREAT job =)
@jeffinj7707 2 роки тому
Awesome
@DrewSpencer 3 роки тому
This is brilliant - your style is really easy to consume and it's great to watch a tutorial by someone who isn't 12 years old.
@RodrigoMorenoIngenieria Рік тому
Fantastic video, would you do one where you show and manage a project setup using vite + react-typescript + testing? Right from the start
@nomoreabdi745 3 роки тому
Please keep doing content, also consider more Software engineering content, like the one for the design patterns, maybe explanation about SOLID, some real world examples in coding applying refactoring, and stuff like that would be helpful.
@SwiftySanders 3 роки тому
I want one on Djikstra's algorithm and DFS/BFS since I seem to get those problems a lot. I'm getting better at them but I am not yet able to code it out in 15 minutes or less.
@tobiasmaier8640 3 роки тому
Your videos are very well made. The overall quality as well as the way that you explain it make it easy to understand. Love it! Keep 'em coming :D (What VS-Code Theme/Plugins are you using? )
@jherr 3 роки тому
Apollo Midnight and Cascadia Code.
@neolin6492 3 роки тому
Awesome! on 53:59 -> type ListComponent = ({ items, render, }: { items: ListItem[]; render: (item: ListItem) => ReactNode; }) => JSX.Element; ^^^^^^^^^^^^^^
@jacinyan3893 2 роки тому
Just in time~~~~
@1235niki 3 роки тому
Thanks jack
@XXXTheShadowXXX 3 роки тому
legend
@alvarodg4668 2 роки тому
simply a crack, very funny and clear
@thaddydore Рік тому
Watched on 1.2x but gots loads of info❤
@krishind99 3 роки тому
This is great stuff. Jack you are fantastic. It’ll be nice if you can consider an enterprise case like authentication (say, Azure AD integration), invoke a NodeJS service and process results etc. This way, we get to see real complexity in action. May be you are just getting started and I’m too curious ;) Keep up the great work
@MarkDekkersLife 2 роки тому
Coooooooooool
@ghostAgent99 3 роки тому
@ 54:10 getting this error while hovering over List in the return at the bottom: 'List' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'. I updated type ListComponent to return a JSX.Element instead of a ReactNode , not sure if thats the correct solution or a quick fix to get it working again: export type ListComponent = ({ items, render, }: { items: ListItem[]; render: (item: ListItem) => ReactNode; }) => JSX.Element;
@jherr 3 роки тому
Hmmm, can you put your code up in a gist and DM me @jherr on Twitter.
@DedicatedManagers 3 роки тому
Absolutely fantastic! Thank you!!! ... I’ve asked this before but I got to keep asking…do you have any (unit) testing videos coming? I honestly absolutely hate testing… But I know it’s a necessary evil!
@Seb16291629 2 роки тому
Interested too. After typescript I ll jump to jest
@king-manu2758 2 роки тому
Did this ever happen? I need to get my testing game up asap.
@DawnFreeSdiki 2 роки тому
Thanks for the video, I would really appreciate if you share your VS Code setting
@jherr 2 роки тому
gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72
@Jjjabes Рік тому
Hi jack, great video!.. one question - where you define the action types for usereducer (26 mins) you have a semi colon between the type and payload properties, why is that not a comma? Thanks!
@nnamenearinze6086 2 роки тому
Please make a video typescript with the react testing library.
@ahmedfattal9569 2 роки тому
Thank you so much for your lecturing React with ts; My question is at 6:37 you were using an array with +1; what I did I increment the length with ++ instead of 1 and the array started with zero instead with 1 and when I used any number like arr.length + 10 // output when you click is gonna start [10] but the increment only by one when you click one more time? why is that?🙄
@WilliamShrek Рік тому
This is pure happiness of being a web developer. 🤣
@DedicatedManagers 3 роки тому
I can’t be on the live on Saturday. But if you could spend some more time explaining the ListComponent type at 54:05 (line 10) that would be super helpful. I don’t really get what I’m looking at there… It looks like a generically typed arrow function?
@rajchhatrala5988 2 роки тому
Great video ;) If you don't mind me asking, can you please tell me what is your theme of editor?
@jherr 2 роки тому
Font is Monolisa. Theme is probably Apollo Midnight on this one, or maybe Night Wolf [dark blue] which is what I've switched to recently.
@eelguneezmemmedov1671 2 роки тому
Thank u for such a nice tutorial . Do u have typescript React real world project?
@jherr 2 роки тому
I'm not sure what you are asking for. Could you be more specific? I've written a lot of applications for this channel, many in TypeScript.
@eelguneezmemmedov1671 2 роки тому
@@jherr Like Ecommerce projects With typeScript
@herberthandrade5000 Рік тому
Fantastic! What's the theme used on VS Code?
@jherr Рік тому
Night Wolf [black] and JETBrains Mono
@kmylodarkstar2253 День тому
Hi Jack! Is there any way or make sense to do something like export type DiscriminatedAction = { [K in keyof typeof someActions]: { type: K; payload: SomeState[K extends keyof SomeState ? K : any]; // trying to define this in order to get the actions from an object and my State shape interface }; }; export const someActions = { SET_DATA: "SET_DATA", SET_SOMETHING: "SET_SOMETHING" } as const; dunno if is better just type the discriminated union with the types of: (E.G) typeof SET_DATA
@harshav2017 2 роки тому
Hey Jack, What are the things we need to consider while installing any package in typescript react project?
@jherr 2 роки тому
You might also need to install the corresponding `@types/` to get the types. But that's becoming less and less the case.
@harshav8900 2 роки тому
@@jherr thanks a lot man
@ashtarathena488 2 роки тому
1. In the useContext example, when is the initialState's first, last ever visible? i.e we only see jane smith to start off and never jack herrington. 2. Is there a way to see the values being available at each step, like turning on a debugger somewhere?
@jherr 2 роки тому
When you hit 'Change context' the names change to `Josie` and `Wales`. As for #2, you might want to check the React devtools, they might show you state and context.
@conspirisi 2 роки тому
Anyone explain what's going on in the useEffect with closure in more detail, I understand closure, but I didn't follow what was going on with this timer example?
@heyalex8597 2 роки тому
what font is that? I really like how the arrow functions are displayed
@jherr 2 роки тому
Operator Mono
@pro-cr2eo 2 роки тому
Hi, good course. it would be great if you used react-snippets because people aren't interested in you just typing out react-components.
@jherr 2 роки тому
Fair point. I should make more use of those.
@AzharUddin-ob7vb Рік тому
Hey Jack I am having a question for you suppose I am using useReducer hook for Filteration for example Using two Filter component in same page using same initial state (which was passed in useReducer) Will there be any problem if our initial state have all reference type specially (SET)
@jherr Рік тому
Please jump on to my Discord server and ask your question there so that we can see the specific code you are describing. Please READ and FOLLOW the #rules before posting.
@jaymartinez311 Рік тому
You should do this tutorial again if possible please.
@jherr Рік тому
You want the same content again? What would you like to hear more about?
@jaymartinez311 Рік тому
@@jherr I should’ve put more context in what I was asking. Sorry. Maybe go a bit further in depth is what I meant please if possible.
@davidjacobsen308 Рік тому
I can't find that VS extension for converting clipboard JSON to typescript interface, could you give us extension name and author?
@brandonleboeuf 3 роки тому
What is the name of that JSON to TS converter extension??
@jherr 3 роки тому
marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts
@slikk66 3 роки тому
How does the `v` get the initial value of 1 ? (on the useEffect example) edit: ah watched it again, so the default typing of valSet (i.e. setter function of the useState pair) allows a function, where the initial argument is the paired-up current value of the state (right?)
@jherr 3 роки тому
Yep!
@slikk66 3 роки тому
@@jherr thank you! really great content, I've already sent several of your videos to a few folks. Personally I would selfishly love to see some AWS appsync/graphql/amplify/serverless content mixed in. Keep up the great work!
@jherr 3 роки тому
@@slikk66 Not selfish at all. Definitely thinking about doing a lot of GraphQL stuff somewhat soon. And maybe a deploy using amplify or ECS.
@slikk66 3 роки тому
@@jherr oh wow that would be great. I've been using Pulumi a lot lately, and this video here really got me thinking: watch?v=8XFjqzX9ZK4 they setup containers deploying infrastructure which are triggered via API gateway to lambda container functions. If you've not checked out their Automation API that might be something neat to cover also if you're thinking to cover any deployment tools
@alvaro1728 Рік тому
Why declare the component (function FooComponent) and then export it separately (export default FooComponent)? You could do both on the same line (export default function FooComponent).
@mpek3110 Рік тому
somehow ReactNode does not work for me. I have to use react.Element of JSX.element as return type of ListComponent.
@eldersonlaborit2290 3 роки тому
i love this tutorial but if u have an state with useState({a:0, b:0, c:0}).. What type is? or ?
@jherr 3 роки тому
It's: useState({a: 0, b: 0});
@eldersonlaborit2290 3 роки тому
@@jherr Amazing sir. thanks.
@aaronstanton1259 3 роки тому
I thought the thumbnail was someone Photoshopping a Zuckerberg-Gates hybrid given React and TS...
@SmartWizzard 2 роки тому
Actually I like to use the Provider components pattern.
@gandalfgrey91 2 роки тому
how did you download the json from terminal like that? I've never seen "git: (master)" before
@jherr 2 роки тому
To download the JSON I usually use CURL. I'm guessing the `git: (master)` is in my custom prompt?
@gandalfgrey91 2 роки тому
@@jherr I see, thanks! Btw, your videos are very helpful! I noticed that createStore has depreciated in favor of configureStore, could you do a CRUD video on that with Redux Saga and Typescrypt?
@lukei9772 2 роки тому
take a shot every time he says cool
@jherr 2 роки тому
Cool!
@alvaro1728 Рік тому
I'm stopped on the 1st 3 minutes of the video and I'm wondering why you say there's not much use for useCallback. I've been using it for all my callbacks to keep sub-components from re-rendering. Thanks.
@dyunior 3 роки тому
Apology newbie question, i know its not in Next.js video..so when using Next.js, is it relevant to use React-Redux/Typescript?
@jherr 3 роки тому
Goo question. React-redux is a fine state manager and is good if you have complex client state that you want to track for a customer during a session. That being said there are a lot of lighter weight alternatives to Redux out there nowadays (i.e. Zustand, Valtio, Jotai, etc.). The decision to use or not use Typescript is orthogonal to that. Typescript is a language extension that supports adding and enforcing types, and IMHO, is a good choice for large team projects.
Алексей Навальный
Переглядів 4,2 млн
Jack Herrington
Переглядів 80 тис.
Вадим Шегалов.Оккультные игры элиты
Переглядів 34 тис.
FISPECKT
Переглядів 156 тис.
РасПаковка ДваПаковка
Переглядів 33 тис.