Adding more examples for the flushSync method

[giacomocerquone]

trafficstars

Hey there, I'm the author of the following post https://giacomocerquone.com/keep-input-cursor-still/ where I showcased a few pain points while managing an input's cursor. Earlier today I also noticed this tweet from Ryan Florence where he was showcasing the usage of the flushSync method in a similar way to the one I was going after using low-level asynchronicity js tools to tame the eventloop such as setTimeout, await Promise.resolve(), etc. etc.

Do you think we could add such examples in the docs or it's just an internal method not to be used so commonly? Svelte has also something similar in its documentation/tutorial with the tick method https://learn.svelte.dev/tutorial/tick

[gaearon]

We should also document alternative patterns. They exist but are far from obvious.

flushSync (as well as stuff like Svelte's tick) breaks down as soon as you have even a tiny bit of asynchrony, e.g. a lazy-loading component, waiting for CSS, etc.

[giacomocerquone]

We should also document alternative patterns. They exist but are far from obvious.

Do you mean alternative patterns that don't include the usage of flushSync, right? Yeah, I totally agree here. The current "hype train" regarding documentation seems to be interactive tutorials (see angular.dev and the svelte link above as examples). The new react documentation might benefit from such additions, I'd love to work on this btw.

flushSync (as well as stuff like Svelte's tick) breaks down as soon as you have even a tiny bit of asynchrony, e.g. a lazy-loading component, waiting for CSS, etc.

Would be nice to have an example. I mean, in what particular reproducible usage of flushSync things would break down? In this way, we could understand more thoroughly all the moving pieces.