Ryan Toronto

it's awesome. my favorite piece about it is how it flattens all async calls and gives you the mental model of sync execution.

uAS+async will always run in order, and each call gets access to previous state even if it was called before the previous call finished 🤯

Process wise I write way more jsdoc comments now. I treat those as future proofing and guarding against any agent that comes into the code base.

Also I'm finding tests to be way more valuable these days. I look at tests as a cheap insurance option now.

I find it helpful it on the edges for non-app code. Like "make me a persistent hash map" that I can then tweak/play with.

Also it's amazing for autocompleting the current line.

But I'm not a fan of huge chunks of app code written with AI. I believe that requires taste that the agent doesn't have.

This switches to the react-server export condition for this import? I like it!

This can be hard to wrap your head around the first time you see RSC. I think it deserves a follow up post!

This is a great question. If you have <Intersection><RSC></Intersection>, the RSC will run on the server before <Intersection> runs on the client.

So you end up with <Intersection>Output from RSC</intersection>. You can wrap in Suspense to not block rendering, but it doesnt prevent RSC from running

Sounds interesting... Do you have an example UI in mind for that sort of use case?

Composable streaming with Suspense A look at two real-world UIs that rely on streaming with Suspense.

New blog post: Composable streaming with Suspense

One of my favorite patterns lately has been using Suspense to stream in lazily loaded content. It's perfect for dynamic dropdown menu options.

twofoldframework.com/blog/composa...

Great great article, thanks for sharing

I know it's a bit boilerplatey, but personally I've found the setState during render (increase/decrease example from docs) to work well with derived useStates based on changing props

Really enjoyed this one. Great post and the video walk through is fantastic as well.

They are the worst :(

Also the AIs that start commenting on issues and other people's pull requests

React Router RSC Preview React Router's preview support for React Server Components is now available

React Router RSC Preview is now available

This brings support for all of React's API in a way that is incrementally adoptable by the millions of React Router apps in production today, but also feels great for a greenfield React Router app

remix.run/blog/rsc-pre...

I'm willing to bet in most my RSC apps I'm passing larger objects than needed between server and client, but it hasn't really been a problem so far.

Agree with Jacob that it's about education. My 2c is devs need to understand .bind and serialization to do RSC well

I made this to help with hoisting and encryption for inline server functions github.com/twofold-rsc/...

Lemme know if you have any interest in something like that for Parcel

Server Components Give You Optionality | Daniel Saewitz

Server Components Give You Optionality saewitz.com/server-compo...

Will do! Thanks for the nudge!

It's so elegant, been using it for the last few weeks and I love it. Might be my favorite example of a directive because:

- Automatic cache keys
- Function hoisting similar to server functions (you can close over variables)
- Opaque references (passing children doesnt create a new entry)

Thanks Artem!

You can serialize a promise in React Use React to create a promise on the server and later finish it on the client.

New blog post on serializing promises in React. Learn how RSC serializes data between the server and client.

twofoldframework.com/blog/you-can...

Great post.

The squiggly line that splits the server and client components is an awesome UI and makes the code easy to read. Is that new?

Upstanding, trustworthy (the opposite of click bait, gossip)

I look forward to your newsletter every week, it's the best way to see what's happening in the React ecosystem

If you're running an RSC server how do handle the react-server condition?

1. start node with --conditions=react-server?
2. run node without conditions, but start a worker with the react-server condition?
3. Something else, like a bundle time thing?

I've been doing 1, but I'm not sure it's best

The Async UI Framework Checklist is great

Toast messages in React Server Components

I wrote about building toast messages into an app with React Server Components.

Really liked how easy it was to use server functions, cookies, and useOptimistic to make this all come together.

buildui.com/posts/toast-...

this is fantastic. we've got a requirement in an app at work where we need to load all the images before rendering the next page. having all that done by react (and tied to a transition) is gonna be awesome

RSC with a form and server action running while JavaScript is turned off

Hey @sebmarkbage.calyptus.eu I have an RSC+MPA question... is there a way to have a <form> that uses a server action directly (so you get $ACTION_ID/REF inputs for MPA), but then after hydration is able to work with client-side code that uses useOptimistic?

Completed this! Ended up releasing it as an open source library: github.com/twofold-rsc/...

My first RSC OSS tool, feels good :)

Wow that's awesome! Thanks for trying it out :)

RSC stream feels like it has so many use cases out outside of component rendering... it's like json on steroids.