React hooks revolutionised state management, but they also come with limitations. A newer concept—signals—offers fine‑ grained reactivity by updating only the parts of the UI that depend on changed values. In this post we compare hooks and signals and discuss how they might shape the future of React development.

Table of Contents

• 1. React Hooks Recap
• 2. What Are Signals?
• 3. Fine‑Grained Reactivity vs Component Re‑Renders
• 4. Migrating Patterns and Considerations
• 5. Conclusion

1. React Hooks Recap

React hooks like useState, useEffect anduseContext provide a functional way to manage state and side effects. When state changes, React re‑renders the entire component, traversing its children and comparing virtual DOM trees. This model is easy to reason about but can lead to unnecessary work when small changes trigger full component updates.

2. What Are Signals?

Signals are a primitive used by libraries like SolidJS and Preact signals to track reactive values. A signal holds a value and notifies subscribed computations when that value changes. Components read signals directly in their render output; when a signal updates, only the affected DOM nodes update, without re‑executing the entire component function. This fine‑grained approach uses the observer pattern to minimise work.

import { createSignal, createEffect } from 'solid-js';

const [count, setCount] = createSignal(0);

createEffect(() => {
  console.log('Count is', count());
});

setCount(count() + 1);

In this SolidJS example, createSignal returns a getter and setter. When count changes, any effect or component that reads it runs again. Only the relevant DOM updates, not the entire component tree.

3. Fine‑Grained Reactivity vs Component Re‑Renders

The key difference between hooks and signals is granularity. Hooks re‑execute components from the top whenever state changes. Signals update only the expressions that depend on the changed value. This can lead to significant performance gains in large apps, especially when combined with features like concurrent rendering.

Signals also provide a synchronous programming model: there is no separate render phase. You simply assign values and the UI updates automatically. This can simplify mental models compared to hooks, which require careful ordering and knowledge of dependency arrays.

4. Migrating Patterns and Considerations

React does not yet have built‑in signals, but experimental libraries like Preact Signals and solid‑react provide a bridge. If signals become more common, migrating would involve replacing state hooks with signal primitives and refactoring components to read signals directly. You would also reconsider context and reducers, as signals can serve as a lightweight global store.

Be aware that signals change how reactivity works and may not integrate seamlessly with existing React patterns. They also require new debugging tools and mental models. Start experimenting in small components and measure performance improvements before adopting them widely.

5. Conclusion

Hooks have served React developers well for years, but signals offer a glimpse into a more granular future. By updating only the DOM that needs to change, signals can reduce wasted work and improve responsiveness. While React may incorporate similar ideas, today you can explore signals through libraries like SolidJS and Preact. As always, choose the right tool for your use case and keep an eye on upcoming innovations in state management.