State-based vs Signal-based rendering

Summary

State-based vs Signal-based rendering When we think about state management in front-end frameworks, we often focus on the API—hooks, observables, or signals. However, there's a deeper paradigm shift at play: where rendering happens. Traditional state management like React hooks triggers renders at the point where state is created, while signal-based approaches like Preact Signals or Solid.js trigger renders only where state is consumed. This shift from "render where you create state" to "render where you use state" has profound implications for performance, code organization, and mental models. The Core Difference In traditional state management with React hooks, when you call useState, any update to that state causes the component—and all its descendants—to re-render. It doesn't matter whether those descendants actually use the state; they're caught in the render wave simply because they're children of the component that holds the state. const Parent = () => { const [count, setCount] = useState(0); return ( <> {/* re-renders even though it doesn't use count */} <ChildA /> <ChildB /> {/* re-renders, actually uses count */} <ChildC count={count} /> </> ); }; With signal-based rendering, the paradigm inverts. A signal is a reactive primitive that tracks its own dependencies. When you create a signal, it doesn't trigger re-renders at the creation site. Instead, rendering only occurs at components that actually access the signal's value. const Parent = () => { const count = useSignal(0); return ( <> {/* do NOT re-render */} <ChildA /> <ChildB /> {/* only re-renders if it reads count.value */} <ChildC count={count} /> </> ); }; This granular reactivity means only the precise components that depend on the signal will re-render when it updates. The mental model shifts from "prevent unnecessary re-renders" to "re-renders only happen where they're needed." Context: The Paradigm Shift Amplified This difference becomes even more pronounced when dealing with the Context API. In...