Mastering React Hooks with Typescript

[@jejunegamingtv1359]

Please keep these React Typescript tutorials coming! Really appreciate it :)

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

[@sundeeppeethala312]

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

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

[@joseubaldocarvajal6472]

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.

[@Khushpich]

Definitely best typescript channel on youtube

[@phuocquang2314]

Thank you so so much sir, as a junior front end developer, your videos help me a lot, thank you!

[@sabrinareyes6134]

Thank you so much!! I have an interview soon and this helped me refresh my knowledge of the foundationals.

[@geneartista9714]

This man deserves a gold play button

[@caleblovell]

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]

Happy to help!

[@hmacccc]

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]

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!

[@yerson557]

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.

[@FrancescoStrappini]

Did learn more about react and ts with this video than and entire (paid) udemy course .... thanks

[@sinaukode]

I like how you explain the concept by implement it first, thanks this is so good

[@DrewSpencer]

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.

[@mainendra]

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]

Thanks for this. Good point.

[@NadaII]

Looking positively windswept today, Jack.

[@hadibakhshi5506]

Oh man, thanks a million. Keep up making react typescript videos I do appreciate you

[@jose6183]

You put out incredible content. I hope you get all the recognition in KZbin this content deserves. Thanks for all

[@jherr]

Thank you!

[@nemanjadjoric8765]

Just what I needed for my job interview. Thank you so so much !!! You are awsome !!! (and you got a timestamps :)). Great !

[@petecapecod]

Wow everything makes so much more sense now. Thanks so much for this video 👍🏻

[@piyushaggarwal5207]

Loved the video. Thanks Jack!

[@sebastianmosneagu2635]

You would make a fantastic teacher.

[@tripperoafull]

Great video Jack, very useful.. Keep sharing videos with TS, remember TS + Expressjs with validators, it will be awesome!

[@mmmmmmm8706]

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!

[@francis_n]

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]

Hahaha. :P I think I'll take that comparison to being compared to Trump, which happened on one of my Traversy videos.

[@francis_n]

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

@@francis_n no worries at all. I actually do a half decent professor frink. 😁

[@francis_n]

@@jherr Now that I have got to hear 😊

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

[@neolin6492]

Awesome! on 53:59 -> type ListComponent = ({ items, render, }: { items: ListItem[]; render: (item: ListItem) => ReactNode; }) => JSX.Element; ^^^^^^^^^^^^^^

[@Fatima-ie5kj]

I *Glad* found this channel & thankyou so much for providing quality content for free looking forward for more:-)

[@iliaposmac8672]

So cool, mostly liked props as an interface.

[@themashcodee]

I love it man how smoothly you explained everything. Thank you I really appreciate it.

[@nottiredofwinning3736]

Learning lots of new stuff here, thanks!

[@hamzahmd_]

Thanks for your tutorials.

[@nomoreabdi745]

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]

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.

[@kirillpavlovskii8342]

Thanks Jack !

[@pablogonzales1092]

thanks to you I'm understanding typscript, thanks!

[@jherr]

That's awesome! Thank you!

[@chaninator512]

You are an excellent teacher!

[@tobiasmaier8640]

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]

Apollo Midnight and Cascadia Code.

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

[@_hugo_cruz]

Thanks Jack!!! 🫶

[@sagarreddy7461]

you killed it jack

[@mahdisaeidi1675]

Absolutely fantastic! Tnx!❤❤

[@DedicatedManagers]

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]

Interested too. After typescript I ll jump to jest

[@king-manu2758]

Did this ever happen? I need to get my testing game up asap.

[@skweezy97]

You're a g for this one. Thank you!

[@yulianaaldrich2802]

Thank you for the explanation! Could you do one accessibility content using hooks?

[@lukerhoads]

I love these tutorials, keep em up Im subbed for life

[@thaddydore]

Watched on 1.2x but gots loads of info❤

[@TrippleMYouAlreadyKnow]

Thanks so much for the awesome lesson!

[@josephwong2832]

awesome tutorial ! subscribed.

[@firebird77]

Fantastic content!!!

[@mmmmmmm8706]

This is so helpful. This is great!

[@ghostAgent99]

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

Hmmm, can you put your code up in a gist and DM me @jherr on Twitter.

[@RodrigoMorenoIngenieria]

Fantastic video, would you do one where you show and manage a project setup using vite + react-typescript + testing? Right from the start

[@DawnFreeSdiki]

Thanks for the video, I would really appreciate if you share your VS Code setting

[@jherr]

gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72

[@jacqueskorb879]

Thank you so much!!!!

[@danieljing9319]

very useful tutorial , thanks

[@DedicatedManagers]

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?

[@m2tdev]

Thank you Jack :)

[@OrangeLightning99]

Very helpful guide, Really appreciate it :)

[@younessfathi1739]

Great, thank you very much

[@ankitmehrotra8519]

Fantastic..

[@adam.k8222]

Thank you a lot. It really helped me!

[@topul5195]

helps so much, thank you!

[@yannicknana]

Nice tutorial

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

[@alvarodg4668]

simply a crack, very funny and clear

[@danielgaliziani2401]

Great lecture!!!!!!!

[@grugbrain]

This is pure happiness of being a web developer. 🤣

[@rajchhatrala5988]

Great video ;) If you don't mind me asking, can you please tell me what is your theme of editor?

[@jherr]

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.

[@nnamenearinze6086]

Please make a video typescript with the react testing library.

[@jacinyan3893]

Just in time~~~~

[@CrayTechTV]

fantastic

[@1235niki]

Thanks jack

[@rangabharath4253]

Awesome

[@leonardorodriguessucena8379]

Keep up with the GREAT job =)

[@krishind99]

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

[@BetterDayEachDay]

Coooooooooool

[@pro-cr2eo]

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]

Fair point. I should make more use of those.

[@ahmedfattal9569]

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?🙄

[@eelguneezmemmedov1671]

Thank u for such a nice tutorial . Do u have typescript React real world project?

[@jherr]

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]

@@jherr Like Ecommerce projects With typeScript

[@mountakhabi]

Custom hook should be in camelCase « useStateComponent »

[@herberthandrade5000]

Fantastic! What's the theme used on VS Code?

[@jherr]

Night Wolf [black] and JETBrains Mono

[@ashtarathena488]

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]

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.

[@jersanbalago3769]

Didn't know Bill Gates itself use React.

[@heyalex8597]

what font is that? I really like how the arrow functions are displayed

[@jherr]

Operator Mono

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

[@eldersonlaborit2290]

i love this tutorial but if u have an state with useState({a:0, b:0, c:0}).. What type is? or ?

[@jherr]

It's: useState({a: 0, b: 0});

[@eldersonlaborit2290]

@@jherr Amazing sir. thanks.

[@SmartWizzard]

Actually I like to use the Provider components pattern.

[@brandonleboeuf]

What is the name of that JSON to TS converter extension??

[@jherr]

marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts

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

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

[@lukei9772]

take a shot every time he says cool

[@jherr]

Cool!

[@aaronstanton1259]

I thought the thumbnail was someone Photoshopping a Zuckerberg-Gates hybrid given React and TS...

[@dyunior]

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]

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.

[@conspirisi]

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?

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

[@davidjacobsen308]

I can't find that VS extension for converting clipboard JSON to typescript interface, could you give us extension name and author?

[@slikk66]

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]

Yep!

[@slikk66]

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

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

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

[@gandalfgrey91]

how did you download the json from terminal like that? I've never seen "git: (master)" before

[@jherr]

To download the JSON I usually use CURL. I'm guessing the `git: (master)` is in my custom prompt?

[@gandalfgrey91]

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

[@Seb16291629]

Why typeof object instead of passing the object ? Do you have a tutorial about that ?

[@Seb16291629]

Oh I see. It’s to avoid to create an interface or type that looks exactly like the initial state .

[@jherr]

Exactly, that way you don't have to define it twice.

[@Seb16291629]

Cool stuff ! Thanks