Dan Abramov asked me to help fix React

useRef is pretty weird in TypeScript. Dan Abramov agreed - and he asked me to try to find any more weirdness with TypeScript and React.

Become a TypeScript Wizard with my free beginners TypeScript Course:

Follow Matt on Twitter

Join the Discord:

[abno__]

Using forwardRef with generics is an absolute nightmare and require a bunch of hacks. Would love that it would just work (actually I would love that forwardRef wasn’t even needed)

[RaphaelFellowes]

Matt - HOC patterns with TS and React are a complete nightmare. And we need to be able to add constraints for children components!

[zachgoll]

IMO, the highest-value thing to be changed (not necessarily "fixed") is Component types:

JSX.Element, ReactNode, ReactElement, FC, ComponentType, ComponentElement, ReactComponentElement

Totally understand I'm massively oversimplifying the complexity of this (esp. backwards compat), but from a DX perspective, having all of these types exposed is a maddening experience.

I would love if there was just a single type exported, something like `ReactComponent` (which somehow, through all these types, does not yet exist...)

[franky]

One confusing thing is the amount of types available to describe components, and what happens with them. Whether you're talking about the function (or class) that implements the component, an instance of this class (whatever that means for FCs), the return value when it's invoked, the valid types for children, the render prop pattern..

[MatiasLeidemer]

I'd love to see a video of you fixing this issue and explaining things along the way.

[gosnooky]

It's long past time Flow was put out to pasture. As an aside, it amazes me that the world's most prevalent front-end library doesn't even ship with its own types. I imagine this is because of their inability to cut ties with Flow.

[DryBones]

You really are the TypeScript wizard 🤯

[ajotel]

You're doing an extremely wonderful job, Matt! I can't skip any of your videos since these are all so valuable! You rock!

[bearfinn]

forwardRef, standardized representation of HTML element props, components with/without ref

[mihaiturcu]

Great initiative and video! As for type improvement suggestions, tweaking the type definitions for memo / forwardRef in order to make them work with generic component props would be pretty sweet.

[JeyPeyy]

You really take on all the typescript pet peeves I have! Thank you!

[extrordinaire]

One thing that I really suffer when using TS with react are the event properties and this one you just mentioned, the ref hook.
About the events are that they're not aware of the type of event they might end up using, that's because they happen to suffer from the same as the ref, and that is that they're not aware of which tags and attributes compose them and therefore can't infer the type automatically.

[anhdunghisinh]

3:20 the forwardRef, i was working with react hook form, creating a custom controller and it is totally unusable with typescript

[pxkqd]

Thanks for making the typescript space better!

[rianfuro]

ReactElement is typed in a very weird way, because it takes `<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>>` as type arguments. So it takes in the shape of the properties of a component constructor but then passes `any` along for the JSXExlementConstructor, essentially decoupling the element props from the constructor props?

Would be much cooler (and intuitive to use!) if `ReactElement` could infer out the property typings of a single generic parameter defining the component type.

[paschanchik]

That's Amazing!
You know what's really annoying? useReducer. It shows errors in such a non-obvious way! Create some redocer that handles complex object. Change some types in handlers, in states or somewhere else. Or mb even in init function. Or Init value. It always (well mb not always, but inconsistency is also bad, innit?) tells some bullshit in error and underlines whole reducer, not the initial values. Sometimes it happend that error in one of handlers, but reducer is still highlighted as errored. Reducer mechanics and errors are so messy in typescript. Sry for my English btw.

[AtRiskMedia]

Step 1: Live vicariously through Pocock
Step 2: ...

[alexandrvienik]

From now on I will call you a TS doctor

[rafaeltab]

Yes! Yes! Yes! Finally, I will not have to suffer this abomanation of typing logic any longer!

[TheKnocKY]

Discriminated unions of props. I'd love to be able to have an Input component where based on the type prop I pass to it it's going to take a different set of propsz or even just different types on value and onChanfe. You can do this with plain objects using typescripts discriminated unions, but in react this doesn't work well at all. I often end up passing a data prop which has the discriminated union there, but it doesn't feel right.