Blazing Fast Tips: React & TypeScript

[@KevinCourbet]

Jealous of anyone starting out and stumbling upon this video. I haven't learned anything new but that's because I spent hours and hours researching those patterns, testing out different patterns and figuring which seemed like the best, sustainable practice. This is essentially 50+ hours of condensed into 6 minutes. These are all real-world actionable patterns that you can't go wrong with. Great job Matt.

[@farulivan]

So true!

[@juliosantiesteban7709]

I learned most of this things ( the few ones I already knew about) in the hard way; by testing autocompleted text in my editor😅. Really useful 👍

[@MsAnnieHuang]

Cannot agree more. I used to just searched in the entire code base to see what other colleagues used for the type for specific react component or dom element. I wished I have watched this video a few years early. Great work Matt!!

[@ncubica]

special the part of = (propt: Props) that pattern took me sweat and blood to figure it out and then if you add forwarded ref paired with a factory function now you can have a forwarded ref fully typed.

[@remirth_bergström]

To confirm your earlier speculation, this fit perfectly into my lunch break/procrastination! I really enjoyed your long form content as well, however these shorter, fast, videos definitely are easier to squeeze into my schedule. Just the nature of our attention economy I suppose. Great work Matt!

[@sumatoken]

omg I can't breath! Thank you Matt.

[@nelsonfrank]

I had to set video speed to 0.8 to grasp the concept from this video, Great job Matt.

[@ikechukwucharles2314]

Fast paced tutorials are the best. Straight to the point. Thanks Matt.

[@universecode1101]

Great duo React and TS. Well done Matt 👏🏻👏🏻👏🏻

[@ccccjjjjeeee]

This is excellent - I already knew most of it but not all, so making the video very dense allowed me to go fast on the parts I knew and slow down on the ones I didn't. Hope you keep making more of this series!

[@whoa_dood]

'Whats up wizards' is such a good intro line!

[@DEVDerr]

Holy shit, I needed this like 2 years ago. I'm glad that your channel exists and you're creating such highly valuable content without wasting user's time. Fantastic job mate!

[@francoisarbour1207]

Loooove this format!

[@s4ndeep1203]

This format will take you places

[@ruuman4]

I wish I had this video when I was learning these frameworks a few months ago. What an incredible overview.

[@zombiefacesupreme]

It's wild! I've re-watched this three times and I've learned something new each time! This is SO dense and full of great information. Thank you!!

[@royz_1]

This is probably the best video out there about React with Ts. The pacing of the video might be too fast for some people. Maybe a little pasue between each topic would be perfect.

[@juliohintze595]

The useRef bit is SO useful. Thanks!

[@pupfriend]

oh... my... god. Thank you. I've been banging my head against the wall trying to figure out how to stop redeclaring/assigning props in child components.

[@rahmannurudin5003]

you are really helping me out, great explanation thanks Matt!

[@rthurJ]

Another instant classic, saving this one for new team members joining in the future!

[@grugbrain]

I need to watch 100 times.

[@nikensss]

I really like short, straight to the point videos.

[@mufa4567]

Finally video that explains me TypeScript in React. I've spend so much time to trying understand this, but now i get it. Thank you!

[@norliegh]

Matt you're a genius. This is so insightful for me as I'm leaning to be better slowly. Thank you so much!

[@pablorr123]

Got at least 2 ideas to use on my current React code! And one thing I had forgotten.

[@harshrathod50]

❤️ the useContext throws error when outside of parent provider tip. 🔥

[@jocdiazm]

Good lord that was a lot to pack in a single video. Loved it.

[@TheAnton982]

Really useful and fast material, I even though that I was watching 1.5-2x video

[@aven7us797]

Been trying to learn TypeScript with React for quite a while and this video has made everything I've been reading and learning so far "click". Thanks!

[@aaronmcadam]

Wow you’ve channelled your inner Fireship 🔥

[@aaronmcadam]

I can hear him in the cadence of your voice 😂

[@ryanliu5191]

🙌 Speechless..amazing content!

[@rafamuttoni]

Great video, Matt! Thanks for sharing

[@khoihoang8888]

Matt... you are my hero! Thank you for sharing this content!

[@sweetime]

Just perfect, thank you so much for this !

[@harshitjoshi3082]

Damn this is pure gold !!! Thank you

[@raynirola]

More of these please.

[@vasyaqwe2087]

Thanks Matt, I'm only starting out with typescript, and haven't found a better teacher than you:)

[@jazzmaster89]

Bookmarking this for my next project, thanks Matt

[@rafaeltab]

These are some brilliant tips! I really love this format of video.

[@johannes.evol.]

Just stumbled on your channel a couple of days ago. Very good content! Well done. Subscribed 😊

[@eleah2665]

Yes, this was blazing! I thought I was playing at 2x speed but I was not.

[@whoman7930]

Yeaaahhh! Knew all of that... Very nice!

[@theindieprogrammer]

The "as const" for returning the tuple on a custom hook is very nice! I wish I had known it before 😅

[@ChillAutos]

This is a beautifully done video. Already knew most of these but picked up a couple nice tips I'm definitely going to use.

[@kajetankowalski420]

Amazing video with lots of useful information. Keep up the great work.

[@marnoux]

Awesome stuff, thanks for this Matt.

[@rhenaldkarrel]

nicely explained!

[@sadev0]

awesome Matt

[@thepetesmith]

Use the FunctionComponent type, the way you suggest is suboptimal.

[@shakirahafeez6692]

Best ts tutorial EVER❤

[@tedsemashov]

Super useful, thanks!

[@harshilparmar9076]

This is one whole udemy course at once !! Thanks

[@francisbelanger]

Very useful. I love this format. The useRef and null behavior explanation is really good. It always confuses me.

[@munzamt]

No words saying about FC, PropsWithChildren (and other type helpers), how to pass exactly 1 child, ComponentType. Hope it will be in part 2

[@robertpataki4844]

Loving the content and the format is great, but way too fast for my 🧠. Thankfully KZbin playback speed can be changed, so on 0.75x speed it stresses me less out. Keep these great videos coming!

[@ginger-viking]

Great video!

[@jasonstewart7983]

Brilliantly done, thank you. You put in 3 minutes what took me months to grasp. So wish this had been on my required watching list *before* I started on my react project! Especially useState() and useRef()!

[@alquran_alhadis]

Good job !

[@ragura]

Great info in a short time! The last part about prop types depending on other prop types was completely new to me. The only times I had trouble following was when error tooltips or type hints obscured the code you were talking about. Normally not an issue, but when it goes by this quickly, it can force a viewer to have to rewind and that feels bad when the speed of the content delivery is part of the allure :) Just some positive feedback!

[@DanielDogeanu]

I'm going to have to watch this video five more times to really process these tips! 😂 But I appreciate the fast pace, I don't have to play your video @2x, just like Fireship. 😊

[@Champagnerushi]

Really good snappy video

[@MightyKingKala]

really amazing video

[@adiorthotos]

Thank you! I'd love to also see you adding chapters/timestamps on the timelines of those types of videos, too.

[@mattpocockuk]

Done!

[@adiorthotos]

​@@mattpocockuk hahaha I was sure you'd follow up! Please don't change when your channel grows :) IMO, at this state, including content, timestamps, thumbnail, and production, this video has all the ingredients for at least _some_ virality. Hopefully, you'll see that in the views. Keep grinding regardless, growth is inevitable with your attitude and professionalism. And that's coming from someone who isn't much of a fan of React nor always agrees with your code-style, TS tips. And that's just fine too. :)

[@artemstratienko4842]

Great explanation!

[@baltaza]

Amazing video!

[@Pyrospower]

Amazing video, this is very useful! Thanks!

[@metameme_yt]

0:17 As an aside you should always import your @types packages as devDependencies rather than dependencies as well ☺️

[@metameme_yt]

Typescript too 😅

[@mattpocockuk]

Matters with libraries, but not with apps

[@bacro2]

@types packages can be a dependency in a library if their types are exposed by library code

[@metameme_yt]

Yeah valid points. Perhaps I should have said as a general rule of thumb you should install them as devDependencies first. But even with apps you can still improve your production build times by having them as dev dependencies as it's one less package that needs to be installed 🤷‍♂️ I also just personally like being able to see the separation of what is actually being used in the production build or not, especially as apps become more bloated.

[@aarond309]

Since next is only called in the npm scripts(I think), you should be able to set it as a devDependancy too. potentially leaving just react and react-dom

[@rockNbrain]

Great job dude ... tks!! 🇧🇷

[@33v4.]

sire I know this is a weird request but would you please make a longer video just because your voice is so calming ú.ù

[@squrler]

Love putting this on 0.75x speed to get a more chill experience

[@mattpocockuk]

BLAZINGLY chill

[@helleye311]

Good stuff! I always hated react context typings, never thought to pass in Type | null and throw if it's null in the useMyContext hook. Great workaround to a major pain with context and TS.

[@rafaelhernand3z]

The generics portion of the video is 🔥. I don't quite understand how the comma makes everything play nice but regardless it has been a very informative video 🎉

[@mmmike3426]

This is content I want to pay for.

[@samuelgunter]

I didn't see any mention of React.FC. From what I've seen, it was disliked in the past because it would always put a `children` prop on, but as of React 18 it doesn't anymore, so using it can make it clear that you've made a React Function Component

[@mattpocockuk]

I think having the component's name capitalised makes it plenty clear it's a component. Plus it contains JSX. I'm yet to be convinced by FC in the post React 18 world.

[@andybourgeoisinfo]

A tRpc video would be nice!

[@nazaka9904]

Very nice video, thank you! As an idea for a future video i would suggest developing minimal configuration of the backend+fronend react typescript npm/github package.

[@theyreMineralsMarie]

That strategy of wrapping context in a custom useContext hook with a null check took me waaaay too long to discover.

[@bacro2]

Regarding using interface vs type for prop types, it does not matter. Using type you can express the same as extending an interface by using intersections

[@rezaainulzaki9651]

I'd like to see more React Typescript videos as i struggle using it :(

[@mattpocockuk]

This should help! www.totaltypescript.com/tutorials/react-with-typescript

[@jeremytenjo]

amazing

[@gmabber]

Discriminated union 😍

[@JayStothard11]

Is there any reason you're using jsx: "preserve: in you tsconfig other than it's the most recent/up to date?

[@firsh]

I've never slowed down a video in my life before 😅

[@paschanchik]

more tips!

[@samuelgunter]

0:16 shouldn't `@types/*` be in devDependencies? or is there no harm in it being inside of dependencies

[@shakirahafeez6692]

Please make a full course of react with TS ❤

[@mattpocockuk]

Done! www.totaltypescript.com/workshops/advanced-react-with-typescript

[@shakirahafeez6692]

@mattpocockuk its paid :,(

[@mattpocockuk]

@@shakirahafeez6692 There's also a free react/ts tutorial!

[@shakirahafeez6692]

@@mattpocockuk can you provide the link please

[@joshdprts]

Quite like the provided React.PropsWithChildren generic for most instances of accepting children. Feels much safer consuming a React contract for adding children to your props, though it doesn't give the customisability of requiring children (as in, having children non-optional) though that could be addressed with another generic (arguably just write the prop yourself at point thouhg) nor enforcing what components can be children (this isn't really a thing TS checks though anyway when writing JSX, but is useful if you're using cloneElement etc)

[@laluneodyssee4404]

One for Vue!

[@Spytie1]

Excellent vidéo as usual! 👏 Do you have any tips to make mouseover description "more readable" when extending html elements? 250+ props listed isn't super elegant, is there a way to "force" typescript into showing "& React.ComponentPropsWithoutRef..." and highlight custom props instead of trying to list everything? Thank you so much for your content!

[@mattpocockuk]

Inferfaces are useful for this! Use extends instead of &

[@Spytie1]

@@mattpocockuk turns out my issue was related to ComponentPropsWithRef showing all props instead of alias, changed to ComponentPropsWithoutRef and it works as expected! Curious, but problem solved, thanks sir

[@vladimirmryscuk8409]

so cool

[@divisivecottonwood]

that's brilliant - although I wish you'd done it slower :) What React TypeScript cheatsheet are you referring to? There are quite a few

[@mattpocockuk]

There's a link in the video

[@PlayWithNiz]

Is Array the new meta for { ... }[]? Or are they interchangeable?

[@mattpocockuk]

It kind of is, because of issues with keyof T[]. But it's not a strong recommendation yet.

[@ashuvssut]

@5:26 what if i wrap the Table component with a forwardRef? How would you pass T in the generic? forwardRef is confusing

[@dennisadamczyk5067]

What are the pros and cons of using React.FC for functional components? Like so: ```ts import { FC } from "react"; interface ComponentProps { foo: number; }; const component: FC = ({ foo }) => { return null; }; ```

[@mattpocockuk]

Guarantees your return type is correct - but I don't think the juice is worth the squeeze. I'll stick with typing the props. But you might be able to convince me.

[@fav8810]

there's a type for props with children called... 'PropsWithChildren'. It just acts as a shorthand to add a 'children' prop to the component

[@mattpocockuk]

@@fav8810 Fewer characters (and more explicit) to just add children?: ReactNode

[@CryptoMarketSummary]

useRef, with a type specified, cannot be initially set to undefined if you want React to pick up the ref's reference? It must be null? Is that correct? I literally just went through this today while trying to reference a ChartJS element to resetZoom after it was already instatiated with JSX. I made it work but didn't understand why

[@harryzachariou1]

Great video! There is a type that ships with React called PropsWithChildren which accepts a generic type where you can pass your typed props :)

[@mgominasian9206]

what if the library is declaring 4 function types , and the Parameter is only getting the first one.

[@re.liable]

Would FormEventHandler also type event.target properly?

[@elfacun550]

Another way to specify Props to components is this: const Compoment = ({wow}) => { } type Props { wow: string}

[@EpicHarvest1]

Concerning the discriminated unions in props, when i try to actually destructure the props in the Model component it doesn't let me access the confirmButtonMessage prop. It works correctly as far as erroring in the ParentComponent when I use type='confirm" and don't pass the confirmButtonMessage prop but not for destructuring inside the Modal component.

[@mattpocockuk]

You can't destructure it, because TS isn't sure it exists!

[@ruhankhandakar]

cooooooooooooll

[@denilsoncosta9837]

do a video of typescript and svelte