Why are people SO obsessed with useSignal()?

why are people so obsessed with signals right now I mean they don't look that different than you state and react yet more and more we're seeing Frameworks created with this construct adding this construct or gaining popularity because of it there's two reasons to care the first is performance a general rule of performance is do less work so whereas react has this mental model of re-render everything such that when this renders on the server this log will run when the page loads it'll run again to hydrate and on every single click of the button this log will run yet again we run all this code and re-render everything every time that means more code to download more CPU Cycles to run and overall more work to do this means as applications grow larger they run more slowly whereas with signals for instance in solid.js this log will only run twice ever one time when the server renders and one time when the browser hydrates every time we click this button this log never runs again because the signal can granularly up update this count value it doesn't have to re-execute the hooks or the render body or do any diffing instead it can laser in to this text node and update that value and do literally no other work less work means faster updates especi's applications get more complex the quick framework takes us even further with quick this log literally never runs in the browser clicking this button inline Updates this text node there is never hydration and you will never see this call to log in the browser getting to that level of granularity means Extreme Performance so that your websites load insanely fast because they'd load practically as just pure HTML and they update insanely fast because instead of running a full re-render a diff and Patch instead like solid.js we'd laser in and write to that text node with no other work to be done but there's an even more impactful benefit of signals they can create a cleaner and simpler developer experience let's say we want to add a time interval to update this count we'd normally use use effects and set interval and then we'll set counts to count plus one but wait do you know the bug we're going to run into count will never update because it's frozen in time from the last render so every second when this interval runs we're going to keep calling set counts with the value of 1 over and over and over now you might say aha you need to update your dependency array and of course do your cleanup at the end too but now we have a new set of issues our interval will no longer be a one second perfect interval every time use effect runs it's destroyed and recreated so its Cadence will be all over the place but when using signals with Frameworks like quick solid.js preacts view or soon angular this is not a concern we can simply write our normal set interval logic and like you'd expect count is always the latest count so we can get and set them with fresh values all the time never worrying about stale values and esoteric bugs and edge cases that can create the same exact thing goes with quick use a client effect up State the value clear the interval on cleanup and it just works the way you'd expect and because the signal values are mutable we can not only pass them to external functions like set interval we can pass them to child components deeply down in the tree using context or to other libraries and hooks and we get a granular and reactive reference all the way from the source to anywhere that the value is displayed so if anyone anywhere Updates this value only exactly who listens to it will need to update and only at the time it's updated no diffing no dirty checking and no complicated use reducer logic learn more about what signals are how they work and how you can use them on the builder.io blog

Channel: Steve (Builder.io)

Views: 67,647

Keywords:

Id: lXDDNM5rZQI

Length: 3min 41sec (221 seconds)

Published: Fri Feb 24 2023