I'm trying to combine React Actions + useOptimistic + React Query but I'm seeing some odd behaviour. What's going on here?

I suspect it's because React Query uses useSyncExternalStore. Does that mean it's incompatible with Actions?

codesandbox.io/p/sandbox/re...

cc @tkdodo.eu @ricky.fm

🤯 This works: codesandbox.io/p/devbox/rea...

(Screenshot shows both the first and second renders using "time slicing".)

Downside is you can no longer use it as a hook. 🤔

Here's a reduced test case demonstrating hydration.

#1 uses useSyncExternalStore. The hydration render (isClient: false) is "time sliced" but the subsequent render (isClient: true) is not "time sliced". ❌

#2 uses useState + useEffect. Both renders are time sliced. ✅

codesandbox.io/p/devbox/rea...

That makes sense. Although not sure what to do about this other one, which is a single form amongst other non-form menu items 🤔

@devongovett.bsky.social 👋 I'm attempting to migrate Unsplash to use React Aria and I'm wondering what I should do about this menu. Currently each menu item is a form—clicking the item needs perform a POST navigation. Is this supported?

I put together a quick barebones browser extension to send custom request headers.

Store: chromewebstore.google.com/detail/custo...

Code: github.com/OliverJAsh/c...

(There are lots of existing extensions for this but they're all bloatware. Also shocked this still isn't built-in to dev tools…)

Using container queries for the first time, I ran into a situation where the query was applying even though the size (height) didn't match the query.

Turns out it was because of this: ishadeed.com/article/css-...

I wonder if dev tools could make this clearer? cc
@bram.us @nerdy.dev @una.im

Does this work?

TypeScript bug? Or expected behaviour?