3 ms·

I think you've misunderstood my post. I'm saying renderless components come "for free" in React -- there's no cognitive overhead or new concepts to learn. It's

by ng12 7y ago

I think you've misunderstood my post. I'm saying renderless components come "for free" in React -- there's no cognitive overhead or new concepts to learn. It's something that comes very naturally as you develop React components to the point where I've been writing renderless components for years without ever really thinking about it. From reading the article linked above it feels very clumsy in Vue based on the fact that there's a whole feature (slots) which not only feels fairly magical but requires a rather meaty article to explain it's usage. I guess what I'm saying is if you're really interested in renderless components it's probably easier to just use React.

Etheryte 7y ago
I still don't really see what you mean — the functionalities are practically identical between the two frameworks, Vue uses slots, React uses props children. The only difference is naming and minor semantics differences. The same principles apply for both, and the discussion is just as relevant for both. Personally I prefer the Vue approach over the React one since React components are usually build more black-box style in this architecture, but that is mainly a preference argument. The "cost" of the approach is the same in both libraries.
- ng12 7y ago
  > The only difference is naming and minor semantics differences I don't agree at all. There are no naming/semantics for doing renderless in React. React has no analogue for "slots" because it's just naturally part of the framework. It's as simple as doing: <LinkList renderLink={(linkProps) => <div>...</div>} /> No extra terminology to learn, no slot keys, extra attributes, or rendering magic, and definitely not something you need a whole article to explain.
  - Etheryte 7y ago
    That's a basic example which doesn't address the topics discussed in the article at all. The same is just as easy in Vue, even with identical property names if you like. <link-list :render-link="(props) => ..." /> The whole idea of renderless is to move beyond this very limited and crude approach for library code where you might need to override only small bits of the logic or all of the logic, depending on your use case. At the moment I can't help but feel you've missed the core ideas of the article and we're discussing completely different points.
    - ng12 7y ago
      Why would you want to use slots, then? It's just extra steps for the same functionality. > The whole idea of renderless is to move beyond this very limited and crude approach for library code where you might need to override only small bits of the logic or all of the logic, depending on your use case Not at all. For example, react-select does this super seamlessly: https://react-select.com/components https://react-select.com/components I guess what I'm trying to say is I don't understand why it seems so complicated in Vue.

by ng12 7y ago

Etheryte 7y ago

I still don't really see what you mean — the functionalities are practically identical between the two frameworks, Vue uses slots, React uses props children. The only difference is naming and minor semantics differences. The same principles apply for both, and the discussion is just as relevant for both. Personally I prefer the Vue approach over the React one since React components are usually build more black-box style in this architecture, but that is mainly a preference argument. The "cost" of the approach is the same in both libraries.

ng12 7y ago
> The only difference is naming and minor semantics differences I don't agree at all. There are no naming/semantics for doing renderless in React. React has no analogue for "slots" because it's just naturally part of the framework. It's as simple as doing: <LinkList renderLink={(linkProps) => <div>...</div>} /> No extra terminology to learn, no slot keys, extra attributes, or rendering magic, and definitely not something you need a whole article to explain.
- Etheryte 7y ago
  That's a basic example which doesn't address the topics discussed in the article at all. The same is just as easy in Vue, even with identical property names if you like. <link-list :render-link="(props) => ..." /> The whole idea of renderless is to move beyond this very limited and crude approach for library code where you might need to override only small bits of the logic or all of the logic, depending on your use case. At the moment I can't help but feel you've missed the core ideas of the article and we're discussing completely different points.
  - ng12 7y ago
    Why would you want to use slots, then? It's just extra steps for the same functionality. > The whole idea of renderless is to move beyond this very limited and crude approach for library code where you might need to override only small bits of the logic or all of the logic, depending on your use case Not at all. For example, react-select does this super seamlessly: https://react-select.com/components https://react-select.com/components I guess what I'm trying to say is I don't understand why it seems so complicated in Vue.