Reactivity is magnitudes simpler and more performant than react style state diffing, it's also much harder to write bad performance code because there's no react style re-rendering. The basic form of signal can be just
function signal(value) {
const subs = []
return {
get: () => value,
set: (newValue) => {
value = newValue
subs.forEach(f => f(value))
},
sub: (action) => subs.push(action),
}
}
For building UI, when the component constructor sees a signal object being passed either to a property / children they'll automatically subscribe to the updates of this signal, and update the HTML property / children when there's an update to the signaled value. With this there's almost no overhead beyond setting those stuff yourself with vanilla JS (except for list updates, those still require diffing).Of course Solid's signal implementation is much more robust and have some very mild magic to make the UX better, but the core concept is really simple. Read about Solid's implementation here https://dev.to/ryansolid/building-a-reactive-library-from-sc...