Thiago

I had already dedicated a lot of time trying to achieve the most optimized bundle size possible (when I took over the app, the main chunk was over 1MB)
The latest vite beta update simply reduced the size of the largest chunk by more than 30%
Kudos to the @vite.dev team and everyone involved

Based on this post, I decided to create a minimal version of the @tanstack.com query that would meet my needs in @svelte.dev
Since Svelte already has asynchronous state-based UI management, all I personally need is a promise manager and cache
Resulting size is also nice
svelte.dev/playground/9...

Only Svelte supports Custom Select! 🤯 #sveltejs #javascript YouTube video by Svelte Society

Svelte is the first framework to let you use CUSTOM <select> elements. How about that?

REPL: www.sveltelab.dev/k486rw4vl693...
Video: youtube.com/shorts/sdCfj...

That would be a shame
It may not be the best abstraction for React, but it's great for other frameworks that work directly with promises, such as Svelte and Solid
I'm also curious as to why it wouldn't be the best abstraction for React

Teachers of good programming practices promote “refactoring” but in reality programming is a race. Those who write a pattern FIRST get praise while those who refactor AFTER have to defend why they didn’t follow the established pattern. No wonder code quality is so terrible across the industry.

Hello world • Playground • Svelte Web development for the rest of us

But what I'm really enjoying is the new flow that's becoming the standard among signal based frameworks to "handle" asynchronous state for you
svelte.dev/playground/h...

Creating a state within a derivation is a great pattern.
I first discovered this pattern with Angular, then I found out it was a common pattern for signal based frameworks
Signals give you an ergonomics and composition power that hooks can't achieve

But for this you can't declare the promise in the same suspense scope where it's used, and therefore in real apps you need an external cache
So in the end the answer to asynchronous state in React remains react query

But without the cleanup of useEffect you can't handle race conditions
What the React team wants is for you to use the promise in a use hook and recreate the promise instead of recreating the value, thus ignoring obsolete derivations
share.glimdown.com/pPeDHRh.SgiI...

This way you don't have reactivity in the fetch
You can achieve this by using a comparison state and modifying the state during render
share.glimdown.com/9ZbC95JQRsSo...

React hooks need a special name because they work in a special way, with different rules than a regular js function

I've seen some people calling them spells
But I don't think there's a need for a special name

Fine-grained everything <p>Modern frameworks like Svelte are fast thanks to signal‑based fine‑grained reactivity, but performance is more than 60fps. This talk covers new approaches to build fast, reliable, data‑efficient ap...

A couple of weeks ago at @perfnow.nl I gave a talk called "Fine-grained everything". It's about @svelte.dev (obviously), and the new frontiers of framework-land, but it's also about some stubborn misconceptions in web performance circles

Gift link: conffab.com/presentation...

Using a second comparative state is still not very intuitive today, but before batched updates, it also created extra re-renders
Before useEffectEvent, useRef + useEffect was the only way to use functions with unstable references in another useEffect
Optimistic state, asynchronous state, and so on

In the case of React, there's also the historical factor that for a long time, useEffect was the only way to achieve many things
Before useSyncExternalStore, it was the only way to sync with external state

I think useEffect gets a bad rep because of the re-rendering model
In any framework, changing state within an effect is suboptimal
In React, even when it doesn't create an infinite loop, it's still a ticking time bomb waiting to explode your app's performance by creating additional rendering cycles.

In V5, they started using "runes," which are special operators used by the compiler
Operators like `import()` or `super()`, which look like functions, are, as far as TS is concerned, just functions but they have their own specific usage rules
This is what MDN calls a function-like expression

Svelte components • Docs • Svelte Svelte components • Svelte documentation

Svelte v3/4 used labels to indicate derivations and effects
v4.svelte.dev/docs/svelte-...

Labeled statement - JavaScript | MDN A labeled statement is any statement that is prefixed with an identifier. You can jump to this label using a break or continue statement nested within the labeled statement.

developer.mozilla.org/en-US/docs/W...

another async feature: out-of-order rendering. this means a component can begin rendering children while it's awaiting data. demo stolen from @ryansolid.bsky.social — these components should render in 3 seconds, but they only take 1: svelte.dev/playground/2...

Bundling is such an underused feature of server dev. It can easily reduce cold start times by 30-40%.

Maybe it's because most backend deps are still stuck with commonjs.

Remote functions • SvelteKit Docs Remote functions • SvelteKit documentation

I don't know about other frameworks, but Svelte has pretty good first party support for handling forms
svelte.dev/docs/kit/rem...

If I understand correctly, this only occurs if you use resetQueries and the reseted query doesn't have an initialData (which doesn't make sense since the purpose of resetQueries is to reset to the initial value)
But even in this case, useDeferredValue can be used to avoid displaying the fallback

I have about 67 uses of useSuspenseQuery in my main app All used within custom hooks that are mostly used more than once
So in total, there are at least 100 different uses of useSuspenseQuery
It's an app with a lot of data updates and derivations
Nowhere is there any fallback after the initial load

The thread was about react.transition vs react.useTransition
React-query had very little to do with the problem
So much so that it was necessary to use both to reproduce the issue.
bsky.app/profile/rick...

You need to indicate the transition in the data that will result in the creation of the new promise, not in the promise itself.
Using useDeferredValue in the query parameters has been working for me, no fallbacks after the initial load.

Doesn't react-query have the useSuspenseQuery hook?
Additionally, it is possible to take the promise from the query and use "use" directly

I mean, you can abstract

function getLinkProps(href) {
return {
href,
class: {
active: page.url.pathname === href
}
}
}

<a {...getLinkProps('/some/path')} />

But in the end it's just a matter of preference

Attachments are already reactive, so you don't need the effect
Personally I prefer using the new built-in clsx in the class prop instead of toggling class imperatively, to remove the need for :global

It gets even simpler with async svelte
Bonus: no flickering on mount