Advertisement Β· 728 Γ— 90

Posts by Jan Nicklas

@capt.dev do you have any time to look into the ESM relay topic again?

I reworked the promise polyfill removal:
github.com/facebook/rel...

the relay-compiler rust fix could be reviewed independently:
github.com/facebook/rel...

if helpful I have time for a sync this week

1 week ago 0 0 0 0

@capt.dev hi I'm Jan frontend lead at Galaxus where we heavily use relay

and relay is literally the last thing blocking us from going full ESM.. I'd love to work on the relay esm support myself just need your guidance to do it right

could you please drop me a DM if you find some time?

1 month ago 2 0 1 0
Preview
Venz Easy and accessible dataviz

βœ‚οΈ Knip v6.0.0-0 is out

A new chapter has begun.

πŸ‘‡

1 month ago 62 9 3 2
Video

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

2 months ago 10 1 0 0
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

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?

2 months ago 0 0 0 0
Bug: autoFocus broken inside <dialog /> Β· Issue #23301 Β· facebook/react React version: 17 and 18.0.0-rc.0-next-27b569969-20220211 Steps To Reproduce render <input /><input autoFocus /> inside <dialog /> execute the showModal() method of the dialog you will notice that ...

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

5 months ago 2 0 1 0

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?

6 months ago 1 0 0 0
Video

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

7 months ago 1 0 1 0

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

7 months ago 1 0 1 0
Advertisement
Post image

You can clearly see that the modal backdrop is cut off

7 months ago 5 0 1 0
Video

Here is Apple.⁠com struggling with these viewport bugs:

7 months ago 10 0 1 0
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 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.

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

7 months ago 140 25 8 7

useTransition (without memo -> no fallback)
github.com/jantimon/rea...

useDeferredValue (without memo -> forces fallback)
github.com/jantimon/rea...

7 months ago 0 0 1 0
Post image Post image

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

πŸ˜΅β€πŸ’«

7 months ago 0 0 1 0

why is that memo not needed for isPending from useTransition()?

7 months ago 0 0 1 0

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

7 months ago 1 0 1 0
Advertisement

it's truly amazing that your memo trick works but who is supposed to understand this code πŸ˜„

7 months ago 2 0 1 0
Post image

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"

7 months ago 0 0 1 0
react-hydration-rules/src/tests/SuspenseTriggerOnExternalStoreComponent.test.tsx at main Β· jantimon/react-hydration-rules Comprehensive guide documenting React hydration and Suspense fallback behaviors during SSR - jantimon/react-hydration-rules

github.com/jantimon/rea...

7 months ago 1 0 0 0
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"

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?

7 months ago 2 0 0 0
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?" 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

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 πŸ˜„

7 months ago 2 0 1 0

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

7 months ago 0 0 1 0
GitHub - jantimon/react-hydration-rules: Comprehensive guide documenting React hydration and Suspense fallback behaviors during SSR Comprehensive guide documenting React hydration and Suspense fallback behaviors during SSR - jantimon/react-hydration-rules

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

7 months ago 15 4 4 0

that could potentially speed up projects a lot - especially if those projects use babel on node_modules

7 months ago 1 0 1 0

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, …

7 months ago 0 0 0 0

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

8 months ago 0 0 1 0
Advertisement

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.

9 months ago 4 1 1 0

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

9 months ago 1 0 0 0
can i use screenshot of https://caniuse.com/?search=masonry

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?

9 months ago 1 0 1 0
Preview
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...

10 months ago 305 61 10 9