Jan Nicklas
@jantimon.bsky.social
living in Switzerland 🇨🇭 mainly working on typescript, css and compiler related frontend topics
https://github.com/jantimon
https://github.com/jantimon
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?
but still - could you please show an example of lost reactivity?
October 1, 2025 at 11:10 AM
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?
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
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
September 21, 2025 at 12:29 PM
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
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
Do you know why act might cause problems when testing useTransition?
Maybe I should switch to playwright tests for this repo
September 16, 2025 at 10:21 PM
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
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
September 16, 2025 at 1:40 PM
You can clearly see that the modal backdrop is cut off
Here is Apple.com struggling with these viewport bugs:
September 16, 2025 at 1:40 PM
Here is Apple.com struggling with these viewport bugs:
useTransition (without memo -> no fallback)
github.com/jantimon/rea...
useDeferredValue (without memo -> forces fallback)
github.com/jantimon/rea...
github.com/jantimon/rea...
useDeferredValue (without memo -> forces fallback)
github.com/jantimon/rea...
September 16, 2025 at 12:48 PM
useTransition (without memo -> no fallback)
github.com/jantimon/rea...
useDeferredValue (without memo -> forces fallback)
github.com/jantimon/rea...
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
😵💫
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
😵💫
September 16, 2025 at 12:31 PM
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
😵💫
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()?
September 16, 2025 at 7:22 AM
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
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
September 16, 2025 at 5:53 AM
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
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 😄
September 15, 2025 at 7:46 PM
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"
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"
September 15, 2025 at 7:43 PM
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"
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"
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?
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?
September 10, 2025 at 8:19 AM
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?
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?
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 😄
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 😄
September 9, 2025 at 6:11 PM
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 😄
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
After removing the `isPending` part the useTransition test is no longer breaking the Suspense Fallback!
I updated the text and adjusted the tests
September 9, 2025 at 7:06 AM
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
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
August 26, 2025 at 2:20 PM
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, …
August 23, 2025 at 6:35 AM
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
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
August 21, 2025 at 5:42 AM
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
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
Reposted by Jan Nicklas
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.
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.
July 12, 2025 at 6:55 AM
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.
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
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
July 12, 2025 at 7:01 AM
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
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
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 would love to use it but it feels like an abandoned feature
do you think it might become stable by 2025 or 2026?
July 12, 2025 at 6:43 AM
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 would love to use it but it feels like an abandoned feature
do you think it might become stable by 2025 or 2026?
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...
It has a dedicated section called:
"Ignore Lighthouse and PageSpeed Insights Scores"
csswizardry.com/2023/07/core...
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.
csswizardry.com
June 8, 2025 at 5:23 AM
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...
It has a dedicated section called:
"Ignore Lighthouse and PageSpeed Insights Scores"
csswizardry.com/2023/07/core...