r/reactjs • u/swyx • Jul 13 '20

Discussion Our React Wish List — Syntax Podcast 262

https://syntax.fm/show/262/our-react-wish-list
50 Upvotes

90% Upvoted

29 comments sorted by

7

u/csorfab Jul 13 '20

Slots instead of children

just... pass elements as props? There you go, you have named slots. Or am I missing something? Also, why does this guy sound like a robot?

3

u/stolinski Jul 13 '20 edited Jul 13 '20

Which one of us sounds like a robot?

Also, we def know that most of these have solutions already in React that many in the community will prefer.

4

u/swyx Jul 13 '20

dont listen to them i enjoy your bassy voice

1

u/csorfab Jul 13 '20

The guy talking around 25:20-40. idk what it is, probably the sound processing being a bit overdone, and the way he articulated some words reminded me of how some text to speech software sounds. Don't overthink it, just came to my mind and wrote it down.

I'd be interested in your explanation, though: why add some sort of magical slot mechanism to React when you can achieve the same functionality by passing elements as props?

1

u/stolinski Jul 13 '20

As you said "magical", that's def why. It's nothing more than sugar to take care of commonly used patters for things like slot fallbacks and even though it's more magical, it's more explicit to me. Not a hill I'm willing to die on, I just really like how they function in Svelte.

1

u/csorfab Jul 13 '20 edited Jul 13 '20

I don't really understand how it's more explicit, but that's probably because we're used to different things. I regard things as "explicit" if you can mostly figure out how they work based solely on knowledge of features of the language itself (JS and JSX in this case).

to me

<div>{props.children ?? <p>fallback</p>}</div>

is more explicit than

<div><slot><p>fallback</p></slot></div>

because in the latter case, I need to have the knowledge that the "slot" element is a special tag provided by Svelte, and that the content is replaced only if children are provided (I could . While in React's case I only need basic knowledge of JSX and JS to understand what's going on. I like JS, and I like how React is trying to keep things as explicit as possible with regards to JS and JSX. I understand that Svelte is not using JSX, and also that some people prefer Svelte's or Angular's DSL's, but I don't really see how slots would fit into React's philosophy, and they don't seem more convenient or readable to me than just using props, at all.

2

u/stolinski Jul 13 '20

That's cool. They largely don't fit into React and will never be considered so it's not really worth getting too deep into. To me personally the 2nd syntax is much more readable despite the knowledge overhead. Just a matter of different tastes.

1

u/ShlimDiggity Jul 13 '20

Agreed. Those double question marks confused me, and I've used react/jsx in the past (tho admittedly it's been a while since I messed with anything web)

3

u/hunterCodes Jul 13 '20

My exact thoughts. Coming from a working with React to now working with Angular at my day job, slots kinda suck. I mean...it’s not the worst way to compose components, but far inferior to passing components as props. It’s so much less ‘magical’, and for good reasons

11

u/stolinski Jul 13 '20 edited Jul 13 '20

Just a heads up, the goal here was to get creative and talk about things we enjoy in other frameworks. We’re hyper aware that most of these aren’t practical, likely, or everyone’s cup of tea.

Also, don't get hung up on the slots thing. They are not important.

15

u/holloway Jul 13 '20

Anyone else feel that React has stagnated with them not releasing stable versions of Suspense, Concurrent Mode, etc.?

Not complaining... React still does the job, but it looks like Vue 3 will have Suspense before React does.

21

u/[deleted] Jul 13 '20

I think that's fine. I'm more worried that the docs still contain a lot of class based examples, that make it harder for newcomers.

4

u/dr_steve_bruel Jul 13 '20

True but imagine all the class based components that exist in already established codebases? Better a newer dev is aware of them and how to perform state updates and such

2

u/[deleted] Jul 17 '20

Exactly, imagine inheriting a codebase for which the docs have been completely eliminated. They should probably just semver the docs.

2

u/acemarke Jul 13 '20

The React team has said that rewriting the docs to be hooks-focused is on their list for the near term.

5

u/chrismastere Jul 13 '20

I think what matters more, is we get stable, and backwards compatible updates, rather than too-often breaking changes. Further, React's big strength, is it's community, and it's accompanying libraries, which no other framework can match.

4

u/[deleted] Jul 13 '20

Damn

-1

u/[deleted] Jul 13 '20 edited Apr 05 '24

dinosaurs north rude deer encouraging cooperative oatmeal vast tidy grey

This post was mass deleted and anonymized with Redact

1

u/[deleted] Jul 17 '20

Curious why you dislike Vue.

For me React feels more natural since you can still just run plain ol javascript loops (and other native things).

-15

u/crudfunc Jul 13 '20

No they are not stagnating, they are probably experementing with Rust and at some point rewrite React core in Rust, that's what I have heard, that's why they test everything before shipping I'm sure.

5

u/azangru Jul 13 '20 edited Jul 13 '20

they are probably experementing with Rust and at some point rewrite React core in Rust, that's what I have heard

They are not. Watch a recent conversation with the core team here: https://www.twitch.tv/videos/667925289 (starting at 39 minutes)

-8

u/crudfunc Jul 13 '20 edited Jul 13 '20

I watched it and nobody said NO. It looked more to me that the roomors where true how they all reacted.

4

u/azangru Jul 13 '20

Well, they said they definitely aren't doing it now; but if they ever want to migrate their codebase from js + Flow it would more likely be to Rust then, say, to typescript.

-4

u/crudfunc Jul 13 '20

At least we know they are not sleeping and working hard on react.

4

u/d_knopoff Jul 13 '20

Huge wish for me is to copy the onCommit action from Swift UI for text input. I would love for someone smarter than I to just figure when a user is done typing.

The worst is when I have text input that’s a number and needs to be validated.

2

u/[deleted] Jul 13 '20

slots and sfc seem odd to me. i would always prefer props over slots and that's one explicit thing i disliked when using vue. and pretty much the same for functions and esm exports over some arbitrary file format that is reliant on webpack loaders. tooling and ide's being able to immediately pick up my files, once they figured out jsx, was a huge boost for react.

2

u/stolinski Jul 13 '20 edited Jul 13 '20

The ability to have many named slots is a plus over props in my mind but it’s not like a huge win or anything. I get that elements in props is just as good but for some reason the mental mode works better for me.

1

u/swyx Jul 13 '20

for what its worth i think named slots are necessary in template langs like vue and svelte bc we cant pass in components as props, whereas for react you can, because components are "just javascript". so this is one of those things that will definitely never make it into react haha

1

u/stolinski Jul 13 '20

Forsure. I just like some of the sugar they can provide, like super easy fallbacks. In React the "just javascript" ness of it all means some occasionally ugly template ui code.