State-based vs Signal-based rendering
13 hours ago
- #frontend
- #reactivity
- #performance
- State-based rendering (e.g., React hooks) triggers re-renders at the point where state is created, affecting all descendants regardless of whether they use the state.
- Signal-based rendering (e.g., Preact Signals, Solid.js) triggers re-renders only where state is consumed, leading to more granular and efficient updates.
- In state-based rendering, context updates cause all consumers to re-render, even if they don't use the updated value.
- Signal-based rendering in context ensures only components that access the signal's value re-render, improving performance.
- Signal-based rendering reduces unnecessary re-renders, computational work, and bundle size by eliminating the need for manual optimizations like memoization.
- Control flow components in signal-based frameworks (e.g., Preact's `Show` and `For`) further refine reactivity, updating only the affected parts of the UI.
- State-based rendering is still suitable for small applications with cheap re-renders, while signal-based rendering excels in large, complex, or high-frequency update scenarios.
- The paradigm shift from state-based to signal-based rendering simplifies mental models and aligns code with actual data flow, making applications faster and more maintainable.