Fix your useRefs with ElementRef

Article: www.totaltypescript.com/stron...
Become a TypeScript Wizard with my free beginners TypeScript Course:
www.totaltypescript.com/tutor...
Follow Matt on Twitter
/ mattpocockuk
Join the Discord:
mattpocock.com/discord

[@rand0mtv660]

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.

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

[@lasindunuwanga5292]

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

[@rahulxcr]

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

[@EddyVinck]

Great, thanks Matt!

[@novailoveyou]

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

[@novailoveyou]

Darn how did I not know this until now

[@Stoney_Eagle]

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

[@YeloPartyHat]

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

[@ytPEDROjoao]

great job!

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

[@Kimi-xp2th]

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

[@tresvecesno7071]

Thanks!

[@valentinochiola1827]

Really cool!

[@obifortune]

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

[@rajaark5643]

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

[@IsayanBros]

TIL. thanks man!

[@rockNbrain]

tks bro!

[@shadlance]

Nice tip

[@UsernameUsername0000]

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

[@mattpocockuk]

It's using shiki-twoslash, then some server-side magic to get it working with our CMS.

[@raulrozza]

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

[@ikechukwucharles2314]

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

[@user-kx4nc4um8v]

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?

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

[@monfernape]

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

[@mattpocockuk]

That component expects a table ref.
You wouldn't know that unless you looked at the component's internal definitions - OR used ElementRef.

[@monfernape]

@@mattpocockuk ah I see. That makes complete sense

[@venusirpuram7731]

Hello,
Nice and Helpful content.
Can you please make video on how to use typescript with API calls, where we don't know which type of data we will be receiving.
It would be very helpful to know how to tackle this situation.
Thanks

[@FunctionGermany]

you can use zod for schema validation if you want to be sure you're only processing data that you expect.

[@venusirpuram7731]

@@FunctionGermany Thanks, will check that out

[@nurlanshukurov3864]

So this is like componentProps but for refs?

[@mattpocockuk]

Yes!

[@thepetesmith]

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

[@TheScottShepard]

Does this not work? ElementRef

[@mattpocockuk]

Yep, works great, but isn't very easily discoverable.

[@axios7776]

Good luck with its big brother: "forwardRef"

[@fallenpentagon1579]

HeytshTML