Fix your useRefs with ElementRef
Вставка
- Опубліковано 24 лип 2023
- 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 - Наука та технологія
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.
Thanks. Didn't knew about this helper. That's very helpful.
Great, thanks Matt!
Fantastic, that's right. Thanks Matt! You're the best
Darn how did I not know this until now
Thank you soo much for this one!
Whish I knew this way earlier.
great job!
wow thanks a lot. This was exactly what I was looking for. Subbed and liked
Oh wow. I had no idea about this! A true gem
Thanks. I used to grab the type from the ref property
Really cool!
Thanks!
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
wish i knew this last week. i ended up creating my own helper functions for the forwardRef
Nice tip
TIL. thanks man!
tks bro!
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.
What should I use forward ref or componentPropswithref and what is the diff between these things?
The IDE-like code snippets (with the hover hints) on your site are so cool! Do you do it on the client side?
It's using shiki-twoslash, then some server-side magic to get it working with our CMS.
How is ElementRef different from ComponentRef? Or are they the same but from different React versions?
Matt, this type uses the HTMLElementTagnameMap type under the hood, right?
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?
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
Not super clear how `ElementRef` is inferring from `OtherComponent` that we're referencing a table?
That component expects a table ref.
You wouldn't know that unless you looked at the component's internal definitions - OR used ElementRef.
@@mattpocockuk ah I see. That makes complete sense
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
you can use zod for schema validation if you want to be sure you're only processing data that you expect.
@@FunctionGermany Thanks, will check that out
I’m shocked you don’t use type only imports in your samples?
So this is like componentProps but for refs?
Yes!
Does this not work? ElementRef
Yep, works great, but isn't very easily discoverable.
Good luck with its big brother: "forwardRef"
HeytshTML