I've been calling it just Setup and Props, not SetupProps and RenderProps

Next.jsで再利用可能なモーダルの実装を学びました。 ・モーダル本体はReact Portalでdocument.bodyに描画 ・中身を差し替えられるようにトリガーコンポーネンを作成 ・モーダルの開閉はトリガー側で管理 ・childrenを関数として渡すRenderPropsパターンで内容を切り替え可能

My instinct is that there might be a missing primitive. On the one hand, if you have something like const UserComponent = ({userId} /* constructor props */) => { const data = fetchUserById(userId) return renderProps => ... } then, if the userId changed, then cleaning up that effect (not shown, and most people probably would leak memory everywhere...) and recreating a new user component is exactly what you want! On the other hand, you might want the signature to be ({ userId } /* initial render props */) => { let currentlyMountedUserId = userId; let data = fetchUserById(currentlyMountedUserId); return ({ userId: newUserId } /* subsequent render props */) => { if (newUserId != currentlyMountedUserId) { currentlyMountedUserId = newUserId; data = fetchUserById(newUserId) } // ... } } Anyway, by now, we clearly have a lot of boilerplate. But it still might be the right primitive, if a framework codegenned all of this. (It's just JavaScript™ is silly, and leaves a lot of DevEx or perf on the table)

おはようございます！ 今日も朝活していきます。 今日のメニューは、読書「りあクト②実践編」p142/224~ 昨日は、 RenderProps や HOC という責務分離と再利用の歴史があり、それがHooks によって完成したことを学習しました。 もう少ししたら実務でもタスタムHooks さわることになるから大変ためになりました！ #駆け出しエンジニアと繋がりたい

It’s cool but unfortunately ‘renderProps’ pattern needs to be revisited.

Good to hear that . Some still ask about component life cycle and things like hoc , renderprops patterns . I was asked about it a year back when i was interviewing .

AppRouterって活かそうと思うとrenderProps的なものが書けないからコンポーネントの末端に機能を集めていく書き方になっていくけど、個人的にはロジックを持つコンポーネントを集めたいからPresentationalな感じに設計したいんだよなぁ。Next.jsはほんとに今後もこのままいくのかな

This is a really bad example of composition. You kind of allow the user to make a mistake like adding the icon in between the other components. If you want something similar you have to use renderProps.

ウチのReact使ってるプロダクトのモーダル実装はRenderPropsパターンです #kobets

Great reply, thank you for taking the time🙏 You have a great point, what I'm trying to say is that unfortunately, the fact that these are low-level primitives and we are at the start of a new generation of mental model shift that is very different than what happened with createClass -> HoC -> RenderProps -> Hooks and that there are going to be a lot of dead-end experiments in userland is not obvious enough. I've spent quite some time on Reddit (and here) lately and people are convinced that using "use client" on useState is a code smell or something to discourage 🫠. Oh boy the shenanigans I've seen to clear forms without using client components ☠️ or the abuse of RSC for frequently changing UI that should just be in the client for the sake of not shipping some JS I'm positive about the future, I love React and I believe I'll love it even more PS: I love the way you express yourself and transfer knowledge, much respect ❤️

I do agree that using cloneElement is too magical and hides the actual behavior, and that renderProps are safer But this is a pattern widely used in the React ecosystem. So having support for it within TS could be more beneficial than harmful

我记得有一招就是把 RSC 当 renderProps 传给 client 组件拿来用 🤡

How to use render props in ReactJS. { by @aka_devzen } from @hashnode techtaleswithshivam.hashnode… #react #webdev #renderprops #FrontEnd

implement efficient solutions. #DSA #LearningInProgress In Development 💻 Moreover, I understand the concept of forwardRefs . I'm excited to further explore renderprops in the near future! Also worked on my project today trying to resolve the error⚡ #ReactJS #100DaysOfCode

also, given how fast things change in tech, sometimes the benefits are very short-lived imagine learning the implementation details of RenderProps, High Order Components, and Class-based Component (stopped using them after 2-3 years of release)

ReactでVue.jsのslot的なことが意外とできたのでその辺まとめました！ renderPropsは前から知ってましたが、children側に書く方法は知らなかったです。 ReactでVue.jsのslot的なことをする｜wintyo zenn.dev/wintyo/articles/f2c… #zenn

After a week of sharing my work, I have 10 users (including me) and some 💎 feedback to work on. Next version gonna have: - React.Fragment support - renderProps browsing. Can't say my work is welcome as I expected, but this is enough for me to keep going #vscode #react

To be fair it is missing patterns that might be more common in React and less in Svelte. Like equivalent to Hook composition, control flow composition, renderProps/scoped slots, named slots. Most of the advanced patterns actually do an interesting reversal I've noticed.

In general renderProps can do everything HOCs or hooks can do and more, to my knowledge anyway. Marko has a built in syntax for renderProps also (tag parameters). renderProps let you pass data to some content while rendering the content any number of times.

not just class based components, i think it's important to learn the design patterns being used in React like HOC, renderProps, Context based approach etc.