Skip to content

Instantly share code, notes, and snippets.

@subtleGradient
Last active March 21, 2024 01:30
Show Gist options
  • Save subtleGradient/40104417bbf7b48f060ac9197832a7e5 to your computer and use it in GitHub Desktop.
Save subtleGradient/40104417bbf7b48f060ac9197832a7e5 to your computer and use it in GitHub Desktop.
example of what a re-renderable React server component could maybe look like?
"use server"
import { $ } from "bun"
export async function* CurrentServerTime() {
while (true) {
yield <html.input key="ONLY ME!" readOnly value={await $`time`.text()} />
await sleep(1_234)
}
}
const sleep = (time: number) => new Promise(resolve => setTimeout(resolve, time))
export function Demo() {
return (
<Suspense fallback="loading…">
<CurrentServerTime />
</Suspense>
)
}
@subtleGradient
Copy link
Author

If you saw code like that, what would you expect to happen?

@subtleGradient
Copy link
Author

https://x.com/sebmarkbage/status/1764399242179744093?s=20 seems to indicate that yielding multiple times from a component should append yielded children instead of replacing or updating as if it were re-rendering.

But by specifying the same key for each child, it seems like this could be a way to explicitly opt-in to re-rendering that child instead of appending it. Is this an abuse of react? Or could this be a legit option?

@subtleGradient
Copy link
Author

https://x.com/shuding_/status/1770623199929078112?s=20
The AI SDK UI stream was implemented via nesting <Suspense> elements

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment