Mastering React Hooks with Typescript
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
Please keep these React Typescript tutorials coming! Really appreciate it :)
Looking positively windswept today, Jack.
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...
Its so refreshing to have someone who uses typescript by default. I realise JS still gets more views, but your typescript videos are amazing.
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!
Thank you so much!! I have an interview soon and this helped me refresh my knowledge of the foundationals.
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.
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.
Great video Jack, very useful.. Keep sharing videos with TS, remember TS + Expressjs with validators, it will be awesome!
Wow everything makes so much more sense now. Thanks so much for this video 👍🏻
I love it man how smoothly you explained everything. Thank you I really appreciate it.
I like how you explain the concept by implement it first, thanks this is so good
Oh man, thanks a million. Keep up making react typescript videos
I do appreciate you
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!
Happy to help!
Thank you so so much sir, as a junior front end developer, your videos help me a lot, thank you!
Loved the video. Thanks Jack!
I *Glad* found this channel & thankyou so much for providing quality content for free looking forward for more:-)
Just what I needed for my job interview. Thank you so so much !!! You are awsome !!! (and you got a timestamps :)). Great !
I love these tutorials, keep em up Im subbed for life
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.
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!
So cool, mostly liked props as an interface.
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.
Did learn more about react and ts with this video than and entire (paid) udemy course .... thanks
Learning lots of new stuff here, thanks!
You're a g for this one. Thank you!
You put out incredible content. I hope you get all the recognition in TH-cam this content deserves. Thanks for all
Thank you!
Thanks so much for the awesome lesson!
Thanks for your tutorials.
You are an excellent teacher!
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!
This is so helpful. This is great!
Very helpful guide, Really appreciate it :)
Definitely best typescript channel on youtube
This man deserves a gold play button
Thank you a lot. It really helped me!
Absolutely fantastic! Tnx!❤❤
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. 😀
Thanks for this. Good point.
Fantastic content!!!
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.
helps so much, thank you!
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 👍🏾
Hahaha. :P I think I'll take that comparison to being compared to Trump, which happened on one of my Traversy videos.
@@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
@@francis_n no worries at all. I actually do a half decent professor frink. 😁
@@jherr Now that I have got to hear 😊
Thanks Jack !
You would make a fantastic teacher.
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
very useful tutorial , thanks
awesome tutorial ! subscribed.
Thanks Jack!!! 🫶
Thank you so much!!!!
Great, thank you very much
Great lecture!!!!!!!
you killed it jack
thanks to you I'm understanding typscript, thanks!
That's awesome! Thank you!
Keep up with the GREAT job =)
Thank you Jack :)
Awesome!
on 53:59 ->
type ListComponent = ({
items,
render,
}: {
items: ListItem[];
render: (item: ListItem) => ReactNode;
}) => JSX.Element;
^^^^^^^^^^^^^^
Nice tutorial
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? )
Apollo Midnight and Cascadia Code.
Thank you for the explanation! Could you do one accessibility content using hooks?
Fantastic..
fantastic
Awesome
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.
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.
simply a crack, very funny and clear
Fantastic video, would you do one where you show and manage a project setup using vite + react-typescript + testing? Right from the start
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?🙄
Thanks jack
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
Watched on 1.2x but gots loads of info❤
Just in time~~~~
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!
Interested too. After typescript I ll jump to jest
Did this ever happen? I need to get my testing game up asap.
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!
@ 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;
Hmmm, can you put your code up in a gist and DM me @jherr on Twitter.
legend
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?
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
I can't find that VS extension for converting clipboard JSON to typescript interface, could you give us extension name and author?
Coooooooooool
This is pure happiness of being a web developer. 🤣
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?
Thanks for the video, I would really appreciate if you share your VS Code setting
gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72
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?
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.
Please make a video typescript with the react testing library.
somehow ReactNode does not work for me. I have to use react.Element of JSX.element as return type of ListComponent.
Great video ;)
If you don't mind me asking, can you please tell me what is your theme of editor?
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.
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)
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.
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.
what font is that? I really like how the arrow functions are displayed
Operator Mono
What is the name of that JSON to TS converter extension??
marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts
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).
take a shot every time he says cool
Cool!
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?)
Yep!
@@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!
@@slikk66 Not selfish at all. Definitely thinking about doing a lot of GraphQL stuff somewhat soon. And maybe a deploy using amplify or ECS.
@@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
i love this tutorial but if u have an state with useState({a:0, b:0, c:0}).. What type is? or ?
It's: useState({a: 0, b: 0});
@@jherr Amazing sir. thanks.
Apology newbie question, i know its not in Next.js video..so when using Next.js, is it relevant to use React-Redux/Typescript?
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.
Fantastic! What's the theme used on VS Code?
Night Wolf [black] and JETBrains Mono
how did you download the json from terminal like that? I've never seen "git: (master)" before
To download the JSON I usually use CURL. I'm guessing the `git: (master)` is in my custom prompt?
@@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?
Thank u for such a nice tutorial . Do u have typescript React real world project?
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.
@@jherr Like Ecommerce projects With typeScript
Didn't know Bill Gates itself use React.
Custom hook should be in camelCase « useStateComponent »
I thought the thumbnail was someone Photoshopping a Zuckerberg-Gates hybrid given React and TS...
Hi, good course. it would be great if you used react-snippets because people aren't interested in you just typing out react-components.
Fair point. I should make more use of those.