@jensimmons.bsky.social
we need your help
@media queries stopped working on our production page
safari now requires a reload to trigger the media query after resize
bugs.webkit.org/show_bug.cgi...
Safari Version 26.3 (21623.2.7.11.6) & Safari TP
the reproduction has no javascript only css:
screenshot of https://github.com/jantimon/react-use-ref-effect/blob/master/src/useMergeRefs.ts highlights the tricky part: if one ref changes, others should not be affected also highlights the part where reconcilation is directly triggered within react render
@ricky.fm I am looking for the correct way to merge two ref callbacks
for example a text-field with a ref returned by a library like react-hook-form together with in view tracking
we ran into bugs and tried to solve it with a hook:
github.com/jantimon/rea...
is this approach the right way to go?
@danabra.mov we have accessibility problems with react because react does not allow using a HTML attribute which was already supported in IE10
do you maybe know anyone who might take a short look?
github.com/facebook/rea...
it makes sense to me that useEffectEvent solves only one thing and not two
but still - could you please show an example of lost reactivity?
you were right!
it took me some time to test all cases manually and migrated them to playwright - but it behaves exactly as you described
github.com/jantimon/rea...
I also ran the playwright tests with react-compiler and the results were quite impressive
I believe you are right
Do you know why act might cause problems when testing useTransition?
Maybe I should switch to playwright tests for this repo
You can clearly see that the modal backdrop is cut off
Here is Apple.com struggling with these viewport bugs:
Screenshot of Safari 26 in "tabs at the top" mode showing a webpage that is set to `viewport-fit=cover` and the dynamic toolbars scrolled away (minimized). The viewport is too short and the safe area insets are all wrong. Device: iPhone 13 Pro.
Screenshot of Safari 26 in "tabs at the top" mode showing a webpage with the dynamic toolbars scrolled away (minimized). The viewport (blue box) is way too short and does not toch the very top of the screen. Device: iPhone 13 Pro.
Viewport behavior in Safari 26 is utterly broken. 🙄😭
Time to get Viewports into #Interop2026 because viewports on iOS have gotten only worse since I did the initial research in, *checks notes*, 2022 — github.com/web-platform...
useTransition (without memo -> no fallback)
github.com/jantimon/rea...
useDeferredValue (without memo -> forces fallback)
github.com/jantimon/rea...
here `isPending` is NOT RENDERED and does NOT force the suspense boundary into its fallback
but in the second example the state is NOT RENDERED and DOES force suspense boundary into its fallback
both the isPending and the count state changed - but only one forces suspense boundary fallbacks
😵💫
why is that memo not needed for isPending from useTransition()?
unfortunately the react compiler must be the first compile step..
that limits using compile time optimizations e.g. for css-in-js, i18n, …
and the compiler is written in babel which makes it quite slow for large codebases
it's truly amazing that your memo trick works but who is supposed to understand this code 😄
here is a useDeferredValue example and unit test
it shows that useDeferredValue has no effect at all and causes the Suspense barrier to render its fallback
for me this does not match the documentation which says "useDeferredValue is a React Hook that lets you defer updating a part of the UI"
the render function is called many many times - although its inside `memo` and it is only once in the tree "react": "19.1.1", "react-dom": "19.1.1"
Here is something else what confuses me and where I also don't know what I don't know
This is a component inside memo and I don't understand why its render function is called 30+ times in this example
stackblitz.com/edit/vitejs-...
Are there any docs which explain this behaviour?
for the prompt "Does SSR with React lazy render the suspense fallback or the content of the lazy component?" Claude gives a very confusing answer
for the prompt "Does SSR with React lazy render the suspense fallback or the content of the lazy component?" Chat GPT gives a kind of okayish answer
Now that I invested more time I feel it is fine
My problem was that I didn't know what I didn't know and where to start when Suspense caused CLS
For example the docs say "non-blocking Transition update" - does that mean there are blocking Transition updates too?
Maybe I was just confused by AI 😄
Many thanks Ricky for the hints - you were absolutely right..
After removing the `isPending` part the useTransition test is no longer breaking the Suspense Fallback!
I updated the text and adjusted the tests
that could potentially speed up projects a lot - especially if those projects use babel on node_modules
We would be curios to track down cross file react context usages - but it seems to be quite hard to do because of custom hooks, lazy loaded components, lazy loaded hooks, styled components, …
I recently wrote something like react-scanner from scratch in rust using swc as parser (claude code helped a lot)
it scanned 12.000 tsx files in under 1s and was a lot of fun to build
i can share the code if it helps
I wouldn’t bet on 2025, but my hopes are high for 2026.
Firefox has had an experimental implementation for years. Safari also has one now. And we’re implementing in Edge/Chrome.
It’s a matter of agreeing on the spec now. Once done, it won’t take long for the feature to ship.
That would be really amazing
Currently the only existing CSS solution is CSS columns and that one comes with really big drawbacks like wrong tab order and limited control over the order in responsive designs
grid-template-rows: masonry
would solve both problems
can i use screenshot of https://caniuse.com/?search=masonry
what does soon mean?
we would love to use it but it feels like an abandoned feature
do you think it might become stable by 2025 or 2026?
We're thrilled to announce the first stable release of Oxlint - version 1.0!
Our Rust-powered JavaScript/TypeScript linter delivers 50~100x faster performance than ESLint with 500+ rules and zero configuration required.
Time to give it a try!
voidzero.dev/posts/announ...
There is a great article about SEO and performance
It has a dedicated section called:
"Ignore Lighthouse and PageSpeed Insights Scores"
csswizardry.com/2023/07/core...
Vite 7 (to be released in ~2 weeks) will be distributed as ESM-only, unblocked by require(esm). We decided to bump node versions to 20.19+, 22.12+ to have it unflagged. Here is @sapphi.red's PR removing the bits of CJS we were still shipping.
Next-Yak playground showing an editor on the left hand side, the rendered output on the right side on the upper two thirds and the transpiled CSS output on the lower third. You can see that next-yak transpiles styled-components looking code to static CSS
We found a way to run our custom SWC plugin on the client in WASM 🎉
If you want to see how next-yak transpiles your input to static CSS have a look here: yak.js.org/playground
