Fix your useRefs with ElementRef

Become a TypeScript Wizard with my free beginners TypeScript Course:

Follow Matt on Twitter

Join the Discord:

[randmtv]

I wasn't sold on the first example because I never found that one problematic, but second example with a custom component is definitely super helpful.

[YeloPartyHat]

Oh wow. I had no idea about this! A true gem

[novailoveyou]

Fantastic, that's right. Thanks Matt! You're the best

[rahulxcr]

Thanks. Didn't knew about this helper. That's very helpful.

[Kimi-xpth]

wow thanks a lot. This was exactly what I was looking for. Subbed and liked

[lasindunuwanga]

Thanks. I used to grab the type from the ref property

[RevolutionaryUsername]

The IDE-like code snippets (with the hover hints) on your site are so cool! Do you do it on the client side?

[Stoney_Eagle]

Thank you soo much for this one!
Whish I knew this way earlier.

[ApprendreSansNecessite]

The second use case has clear added value. Why would a component know about what is merely passing through it? I'm not a fan of the first one though, because we are replacing a native thing that, as a reader, you are supposed to know or recognise right away with some arbitrary React thing that you will have to look up and that is taking a string that is no more readable than the native type. Moreover, the API is confusing because it takes either a string or a component type. This would (and I disagree) be improving the experience of the writer at the expense of the reader, which I think is backwards as most devs read more code than they write.

[monfernape]

Not super clear how `ElementRef<typeof OtherComponent>` is inferring from `OtherComponent` that we're referencing a table?

[obifortune]

wish i knew this last week. i ended up creating my own helper functions for the forwardRef

[ikechukwucharles]

Matt, this type uses the HTMLElementTagnameMap type under the hood, right?

[rajaark]

What should I use forward ref or componentPropswithref and what is the diff between these things?

[TomaszSuski-vr]

And what about ref to component where useImperativeHandle is used to add some property?
the "original" ref is done internally there, and outside is the ref to useImperativeHandle.
How to manage this ref type?

[captainnoyaux]

I love your videos especially when ts is combined with react in a proper way. Do you have plans on speaking about the combo react material ui ? That'd amazing

[quterma]

Didn't get how to make for ex. a hook which is returning ref which could be assigned to different type of elements (react components different html jsx in return). Seems to be generic with passed in type = typeof 'target component', but ts not happy when I try to reach for ex. ref.current.contains property

[nurlanshukurov]

So this is like componentProps but for refs?

[raulrozza]

How is ElementRef different from ComponentRef? Or are they the same but from different React versions?

[thepetesmith]

I’m shocked you don’t use type only imports in your samples?

[TheScottShepard]

Does this not work? ElementRef<HTMLAudioElement>