I am exploring options to optimize the performance of my web application, specifically in terms of minimizing unnecessary re-renders/re-calculation. I've come across Preact Signals, which seem to provide an interesting alternative to React hooks. According to my understanding, Preact Signals allow for granular updates when signal values change, without necessitating a re-render of the entire DOM tree, leading to potential performance gains.
In contrast, React’s state hooks could lead to additional re-renders, but these can be mitigated using various optimization techniques like useMemo, useCallback, React.memo, ....
Given this context, I am trying to assess which approach would yield better performance in a real-world scenario:
- A React.js application where state hooks are used in conjunction with
useMemo,useCallback,React.memo, ... to prevent unnecessary re-render/re-calculation. - An application using Reactjs with Signals for state management.
I have come across numerous benchmarks comparing unoptimized React applications with applications using Signals in react, but I'm interested in comparison of the above two cases.
I am interested in understanding the trade-offs and potential performance implications.
Preact is a lightweight alternative to React with a smaller bundle size. Preact Signals provide a reactive programming model, allowing for efficient updates in response to state changes. Preact's smaller size can result in faster initial load times for applications, especially in scenarios where bundle size is critical.
But that's not only that. You can achieve the real performance improvement by avoiding vDOM and that is beautiful thing. Depends how you implement them but reading signal.value directly without using useSignals() or transformers bring amazing results.
They explained a lot of these improvements on their blog already: https://preactjs.com/blog/introducing-signals/
In real world scenario the Signals became my go-to approach for state management. They're also easy to debug.