Loading video...

Video Failed to Load

Go Home

Preact Signals just got a huge perf boost: Signals rendered as text/props & effects only "pull" as fast as needed for rendering. Since computeds run as-needed, they now only re-run as often as their downstream DOM output can be painted. H/t to jovi 🐨 for making this happen.

35,762 views • 1 year ago •via X (Twitter)

8 Comments

Jason Miller 🦊⚛'s profile picture
Jason Miller 🦊⚛1 year ago

In the vid, a signal for the mouse coords is used to compute 1000's of positions that are applied to 1000's of elements as CSS in an Effect. In 1.x, when the rate of input exceeds screen refresh, computations run more often than their results can be painted. In 2.x, they don't.

Jason Miller 🦊⚛'s profile picture
Jason Miller 🦊⚛1 year ago

The awesome thing is, this effectively brings the value of scheduling to signals without any of the headaches normally associated with it. Because it's not possible to bog the graph down by computing state for outdated frames, it can begin computing on every frame instantly.

Jason Miller 🦊⚛'s profile picture
Jason Miller 🦊⚛1 year ago

This is possible because Preact Signals uses a two-phase design: changing a signal notifies its deps that they need to recompute (top-down), but computation is only performed when a dep's value is accessed (bottom-up). All we have to do is intelligently schedule the leaf reads!

Wallaby Team's profile picture
Wallaby Team1 year ago

🚀 Wallaby.js v2 is here! 🎉 ▪️New unified UX ▪️Works with ALL editors (NeoVim, Zed, Vim, etc.) ▪️Interactive test timeline ▪️and much more! Ready to take your testing to the next level? 💻🔍

tobi lutke's profile picture
tobi lutke1 year ago

@JoviDeC neat

Fabio Spampinato's profile picture
Fabio Spampinato1 year ago

At what rate is the browser triggering events? 🤔 Presumably in some cases it has to trigger events faster than the screen's refresh rate, but shouldn't that be pretty rare? One can kinda force an fps cap on portions if the UI with some kind of fully controllable Suspense, but it seems better if an optimization like that is implemented deeper in the framework.

Andrew's profile picture
Andrew1 year ago

@JoviDeC Looking good in as usual!

tom newton's profile picture
tom newton1 year ago

@JoviDeC Nice one @JoviDeC

Related Videos