Goodbye, forwardRef

Рет қаралды 5,424

Күн бұрын

Goodbye, forwardRef - The drama in 5 acts.
(reuploaded, audio sync fixed)
📖 Resources:
Docs:
- react.dev/reference/react/for...
- legacy.reactjs.org/docs/forwa...
RFCs:
- github.com/reactjs/rfcs/blob/...
- github.com/reactjs/rfcs/pull/...
- github.com/facebook/react/iss...
GitHub Discussions:
- github.com/facebook/react/iss...
- github.com/facebook/react/iss...
Other:
- fettblog.eu/typescript-react-...
🐦 Tweets:
- / 1230843448057569285
- / 1683414495291486208
- / 1747760712464613834
- / 1718507694443704803
- / 1672305484718800896
- / 1719496241501847884
- / 1635250148208164864
⏱️Timestamps:
00:00 - Intro
00:31 - Act I - Why do we need forwardRef?
01:35 - Act II - 7 issues with forwardRef
01:54 - Issue #1 - It doesn't support multiple refs
02:36 - Issue #2 - Component can loose it's displayName
03:09 - Issue #3 - It's basically a boilerplate
03:30 - Issue #4 - It can be a naming anti-pattern
04:14 - Issue #5 - Complicated TypeScript Issues
05:23 - Issue #6 - Potential Performance Issues
05:52 - Issue #7 - Not supported below React 16.3
06:16 - Act III - The Alternative
08:19 - Act IV - Remaining 5% of cases
10:17 - Act V - Why forwardRef was added to React?
13:18 - RFC to remove forwardRef
14:24 - Why blocking ref forwarding was a mistake

Пікірлер: 19

@meowmix0008 Ай бұрын

High quality research, point of view, and video! Please keep making content!

@thisweekinreact 3 ай бұрын

Great video, I forgot a bit about the historical context of all this over time 😅 Shared in this week's newsletter 👍

@UIEngineering 3 ай бұрын

Yup, the evolution of some of those APIs is interesting when you look at it retrospectively 😄 Thank you very much! I'm an avid reader of This Week in React myself, so it's a huge honor for me to be mentioned, appreciate it!🤩

@merotuts9819 5 ай бұрын

Such a detailed..and well-researched video. Well done 👏 Instantly liked & subbed 👍

@UIEngineering 5 ай бұрын

I did write and rewrite the script for this video at least 5 times. So glad you liked it! Welcome onboard! 😊

@gerardmarquinarubio9492 5 ай бұрын

Hey commenting again here! Thanks for fixing the audio desync.

@UIEngineering 5 ай бұрын

Thanks for letting me know! My bluetooth headphones had a delay and tricked me 🙈

@Cahnisama 3 ай бұрын

This video was amazing, thank you so much

@UIEngineering 3 ай бұрын

Thank you! ❤ It means a lot, and new videos are coming! ☺

@RamaRama-qv3jo 4 ай бұрын

That's great! I tried this pattern with the component of the Ionic framework, everything works great.)) Thanks!

@UIEngineering 3 ай бұрын

Glad I could help! I think having this in your toolbelt definitely helps 🙂

@the-other-sunny 5 ай бұрын

Liking again !

@UIEngineering 5 ай бұрын

Unfortunately reuploading totally killed this video's reach, so thank you for support! Appreciate it very much! ❤️

@Daddyjs 2 ай бұрын

Can you just pass ref to a functional compojent and call the prop something other than ref ? Like so instead of calling the prop name ref. This way you can pass it as a prop

@UIEngineering 2 ай бұрын

That's exactly the idea of what I've called "Custom Ref Prop Pattern" (06:16 - The Alternative). Exactly what you've described 👍