Jan Nicklas

Venz Easy and accessible dataviz

✂️ Knip v6.0.0-0 is out

A new chapter has begun.

👇

@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"

github.com/jantimon/rea...

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

@danabra.mov did I miss anything in github.com/jantimon/rea... ?

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?

Announcing Oxlint 1.0 The first stable version of Oxlint, a fast & easy-to-use Rust-powered linter for JavaScript and TypeScript, is out. Learn about its 50~100x speed advantage over ESLint, support for 500+ rules, real-wo...

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...

Core Web Vitals for Search Engine Optimisation: What Do We Need to Know? – CSS Wizardry There’s still a lot of misunderstanding about CWV for SEO. Let’s work it out together.

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.