For anyone that recalls the SkipRenderOnClient React SSR performance hack, if you have run into compatibility issues since React 19.2+, I think I've found an idiomatic fix: gist.github.com/denk0403/be1...
Personally, since cleanup functions were added to ref callbacks, I've begun to sorta see them as effects, and at times using them instead of useLayoutEffect for things. But I now realize that might behave weirdly with Activity, which I bet still runs ref callbacks, but doesn't commit effect events
The framing that helped me was that useOptimistic creates a proxy for the provided argument, and in a transition, you can set the proxy to use a different ephemeral value. This clarified for me that I also need to do something (async) in the transition to actually update the provided argument.
Though I just remembered WebSockets exist and are full duplex, so I wonder why they aren't used already
But maybe we should be writing server actions as if it is supported so we get progressive enhancement.
Also with a custom protocol, I believe it could allow for full duplex streams once browser support improves. At the moment, "use server" waits for all serialized promises to resolve before transmitting the request, which definitely makes it a bit less useful currently.
After some investigation, I think that error is due to a React bug. I didn't notice anything particularly wrong with the router code, and my random attempts to fix it on the router side weren't fruitful. So I filed a bug report: github.com/facebook/rea...
It's not ideal, but you can put a Suspense boundary around the <body> tag of your root layout, and React will not start streaming until it is unblocked. Unfortunately, you will also lose visibility into which parts are blocking.
I think "below the first div" is the direct child of <Item> in LessonCard, which for me doesn't fix the issue. It only works with an extra DOM node for me.
Also, I occasionally see this error when toggling items quickly. It causes the whole page to freeze until the timeout.
Yea that seems to fix it. Interestingly, that's closer to the first workaround I mentioned in github.com/rickhanlonii..., but I was missing the default "none" piece. I'll update the comment and PR with this fix, but it's also not really clicking for me why the extra <div> is necessary.
Somehow I didn't notice until now there was search functionality. But yea it does break it :/.
What do you mean by "below the item"? Like below <Item> in the LessonCard component? When I add a default "none" there, it also break search filtering animations.
Kind of feels like a React bug where it's too aggressively applying view transition names. But this is my best attempt at a workaround: github.com/rickhanlonii...
I have a gist of various React 19 resources. They're probably more high-level than what you're looking for, but they're great for building intuition. gist.github.com/denk0403/ef1...
In my codebases, I usually use this trick: x.com/sebastienlor...
Seems to also work if you use `shouldRender` to determine the Activity mode.
You could also suspend with an infinite promise to delay hydrating non-visible components, but in my experience this ends up being very slow for some reason
React compiler or even just the memo API should help in this scenario, right? And I can't come up with any scenario where the isPending flows into the suspending component that doesn't feel kind of absurd. So long-term, this probably isn't an issue
I also think it'd be beneficial to callout the difference between async transitions and transitions with async work, kind of like what's shown in this issue: github.com/facebook/rea.... I bet code like in the second message is a common mistake.
I think some more insight into how and when to use transitions could be helpful. Might be cool to also show it working with <Activity/> and <ViewTransition/>, but then you risk making people think transitions are still experimental as well.
Yea, I get the sense from a lot of devs on my team that they think transitions are solely for optimizing performance, or just some advanced feature they haven’t needed yet. In general, I feel like many devs still don’t actually think about concurrent rendering and how it impacts their application.
BBC News headline: Frankenstein is monster success at Venice film festival
Actually, Frankenstein is a doctor success at the Venice film festival
May I submit this one for your consideration then? It's a very unlikely edge case, and it has an easy workaround, but the actual fix also seems straightforward. github.com/facebook/rea...
Letdown
The first website I ever made: denniskats.dev/Mocking-Spon...
Made it before OffscreenCanvas was available, so it uses a hidden canvas and data URLS to display it as an image.
Last I checked, this gets around 1K visitors a month 😁
I really wish the email started with “Sure! Here’s a professional email you can scam Soren with:”
I think it works with plain JS too, but regardless it requires an IDE with TS integration. No clue if it works in other flavors of JS though, so having it as a feature of the language would still be nice
Far from a perfect solution, but you can exclude modules from auto-importing via JS/TS preferences. Then “friends” are just modules where you manually import the “internal” modules. www.typescriptlang.org/docs/handboo...
It basically works how it would as a switch statement, but in a declarative and "lazy" way to support SSR.
Device width isn't fluid, but we wanted to support going between orientations or resizing the browser window without losing state or jarring the user. The idiomatic fix is to "lift shared state up" (and occasionally we still have to), but it's nice that sometimes we don't.
For us, it’s not so much that the mobile and desktop UIs look substantially different, but that the data and props passed to subcomponents may differ. Below is an example of the API. We wanted it so that switching between mobile and desktop did not remount the “Card” or “NeedHelp” components.
I’m unable to send you a DM for some reason, but I’m potentially interested. Could you DM me more about the role?
