Devon Govett

If you’re curious how React Server Components integrate with a bundler, how “use client” actually works, and how RSCs can even benefit client rendered apps, tune into my talk at React Conf at 2:30 PST today!

View overlooking a lake with palm trees in the foreground.

What a nice view to wake up to for React Conf!

Yes. We're still planning a TagField, which would allow "inline" editing of the tags (like the gmail "To" field). But you can get pretty close with Select + TagGroup + Autocomplete example I showed.

Yes! bsky.app/profile/devo...

<Select> <Label /> <SelectValue> <TagGroup /> </SelectValue> <Button /> <Popover> <Autocomplete> <SearchField /> <ListBox /> </Autocomplete> </Popover> </Select>

Here's the demo shown in the video combining a Select with a TagGroup. You can add a TagGroup within a SelectValue and access the selected items via the render prop function. It also uses Autocomplete to allow filtering. Composition ftw! 😀

stackblitz.com/edit/rac-sel...

Big React Aria release! 🚀

🥳 Multi Select!
🎬 ComboBox onAction prop, e.g. "create" item
➡️ Disclosure animation
✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc.
📱 Improved modal behavior in iOS 26
📆 Calendar selectionAlignment

react-spectrum.adobe.com/releases/202...

Cool. I've been testing it with some React Aria demos I'm working on. Very excited about it.

No ViewTransition? 😢

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

stackblitz.com/edit/rac-swi...

Btw WCAG actually covers this. But the path to get from each page to the accessibility settings needs to itself be accessible by default so users can find it. www.w3.org/WAI/WCAG21/T...

I agree that user customization is helpful, but WCAG is a good default. I don’t think it’s acceptable to make the UI inaccessible by default just because there are settings to change it. Users may not be aware of these settings.

WCAG says 3:1. I know the algorithm isn’t perfect but the spirit is pretty clear I think. We’ve been working on similar components recently so it’s been on my mind. There are also other ways to pass than a dark border or inverted background, like adding an indicator line, bolding the text etc.

None of them have enough contrast to tell which one is selected

Looking forward to speaking at React Conf about how Server Components and bundlers work together!

You can add a "Create" option to a React Aria ComboBox in just a few lines of code.

stackblitz.com/edit/szjf6ul...

~140

I think I finally found a solution to reliably prevent scrolling behind modals on iOS! 😲

Works when tapping inputs, with different keyboard sizes, when the address bar is collapsed or expanded, programmatic focus, dialog scroll animations, etc.

Coming soon to React Aria! 🎉

Animating React Aria Tabs, ToggleButtonGroup, etc. is about to be super easy with the new SelectionIndicator component. 🥳

• Native CSS transitions, no animation library needed.
• Works with SSR with no flicker before JS runs.
• No ResizeObserver.
• Enter + exit animations.

In particular, Parcel’s asset graph is language agnostic (CSS, images, etc are natively supported). It also supports multiple environments (eg ssr and csr) in a single module graph, which enabled things like RSC support in a non-hacky way. And it’s a bundler, so dev and prod work the same way.

Parcel solved all of those issues 5+ years ago 😉

In the next release of React Aria, disclosures are animatable with 2 lines of code. 🎉

height: var(--disclosure-panel-height);
transition: height 200ms;

Works with browser page search too!

The rest of the sentence is talking about the order things occur in time (“renders ahead of time”) so I would assume “before” also refers to time. Maybe restructuring the whole sentence instead of just that phrase would be better.

Ehhhh, not necessarily. We say SSR for build time too and that’s way more confusing. I can’t think of anything better.

That’s why I said “before the client loads”. How important is it that it happens before SSR? It either has to be before or during SSR to happen before the client loads. One vs two passes is kind of an implementation detail? I just think of it as outputting HTML or “JSON”.

I would say “bundling” is creating the chunks (build time), not determining which to load (runtime). In client-only apps that’s done in the browser with dynamic import(), and in RSCs it happens during rendering on the server.

Bundling happens at build time, not at request time so I don’t think that’s right.

Btw I think SSR needs a more specific name now. I’ve been saying “HTML rendering” or “SSR to HTML”. RSCs are also rendering that happens server side, but not to HTML. 🤷🏻‍♂️

That’s still before the client loads. I guess if you want to be even more clear that it happens before SSR, maybe “before HTML and client rendering” but it’s hard to capture in only one sentence. I would say something more general first and then have a diagram or something showing the stages.

Not sure what you mean by this. They do run on the server or during the build, both of which are before the client loads?

Hmm, technically it is after bundling in current implementations (there’s no per-request bundling I’m aware of). I would say “renders ahead of time, before the client loads” or something like that.