4 ms·

Doesn't Preact use the same model but prioritise bundle size over performance?

by sesm 2y ago

CharlieDigital 2y ago
It's not the same model. Many, many (if not most) devs probably do not realize that React has an "inverted" model of reactivity and is in fact the root cause of it's performance woes. To the extent that the React team spent 2+ (almost 3?) years working on a compiler to address the issue by adding in the correct memoization primitives in a compile phase (trading increased memory consumption for more runtime performance...). I wrote about it here with code examples that work in JSFiddle: https://chrlschn.dev/blog/2025/01/the-inverted-reactivity-model-of-react/ https://chrlschn.dev/blog/2025/01/the-inverted-reactivity-mo... The short of it is that by pointing the reactive callback to the component function, it means that state within the component function has to be managed carefully. This doesn't happen in Vanilla, Preact, Solid, Svelte, and Vue because they point the reactive callback (via "signals") to a handler function that captures the component state in a closure. This is also why they are all faster and consume less memory than React. Because React points the reactive callback to the component function, it effectively starts from a clean slate each re-render so the purpose of React Hooks is to move state out and inject them back (thus they are called "hooks") when it re-renders. In Preact, this is not the case since it uses signals: https://preactjs.com/guide/v10/signals/ https://preactjs.com/guide/v10/signals/ A short video of the same examples if you prefer: https://youtu.be/7OhyP8H7KW0 https://youtu.be/7OhyP8H7KW0
- sesm 2y ago
  The blogpost in the first link doesn't mention Preact at all. Preact is mostly API-compatible with React, and it having a different underlying model is an extraordinary claim that requires extraordinary evidence. I've read the docs on Preact signals, and they look like React refs, but put outside of components. edit: the last paragraph about refs
  - CharlieDigital 2y ago
    > ...a different underlying model is an extraordinary claim that requires extraordinary evidence You are looking at the syntax and not the reactivity model (how it determines what functions to call when a change happens). The post doesn't need to mention Preact because every other framework is signals-based except for React. Vue is simply the stand-in for "signals-based reactivity". Vue has different syntax from Preact (though it, too, can also use JSX), but it has the same reactivity principle. https://preactjs.com/guide/v10/signals/ https://preactjs.com/guide/v10/signals/ > What makes Signals unique is that state changes automatically update components and UI in the most efficient way possible. Automatic state binding and dependency tracking allows Signals to provide excellent ergonomics and productivity while eliminating the most common state management footguns. It uses the same underlying reactivity model as Vue, Svelte, Solid, and Qwik. Vue docs: https://vuejs.org/guide/extras/reactivity-in-depth.html#connection-to-signals https://vuejs.org/guide/extras/reactivity-in-depth.html#conn... Solid docs: https://www.solidjs.com/docs/latest/api#createsignal https://www.solidjs.com/docs/latest/api#createsignal Svelte: https://svelte.dev/blog/runes#Signal-boost https://svelte.dev/blog/runes#Signal-boost Qwik docs: https://qwik.dev/docs/components/state/#usesignal https://qwik.dev/docs/components/state/#usesignal In the blog post, Vue is the stand-in for signals-based reactivity. All signals-based reactivity models work the same way at a high level (their difference being primarily in their low-level DOM diff and update). My prediction is that even React will eventually end up signals based because of TC39 Signals: https://github.com/tc39/proposal-signals https://github.com/tc39/proposal-signals
    - sesm 2y ago
      Preact is not signals-based, it uses the React model with state and props as the basic model, but also provides Signals as a parallel model.
      - CharlieDigital 2y ago
        I guess that's like arguing a Prius Prime isn't electric because even though it has a battery and can drive all electric, it also has a gas engine. :shrug: But very clearly, Preact has the option of the exact same reactivity primitive and design as Vue, Solid, Qwik, and Svelte https://preactjs.com/guide/v10/signals/ https://preactjs.com/guide/v10/signals/ > In Preact, when a signal is passed down through a tree as props or context, we're only passing around references to the signal. The signal can be updated without re-rendering any components, since components see the signal and not its value. This lets us skip all of the expensive rendering work and jump immediately to any components in the tree that actually access the signal's .value property.

Doesn't Preact use the same model but prioritise bundle size over performance?

by sesm 2y ago

Doesn't Preact use the same model but prioritise bundle size over performance?

It's not the same model. Many, many (if not most) devs probably do not realize that React has an "inverted" model of reactivity and is in fact the root cause of it's performance woes. To the extent that the React team spent 2+ (almost 3?) years working on a compiler to address the issue by adding in the correct memoization primitives in a compile phase (trading increased memory consumption for more runtime performance...). I wrote about it here with code examples that work in JSFiddle: https://chrlschn.dev/blog/2025/01/the-inverted-reactivity-model-of-react/ https://chrlschn.dev/blog/2025/01/the-inverted-reactivity-mo... The short of it is that by pointing the reactive callback to the component function, it means that state within the component function has to be managed carefully. This doesn't happen in Vanilla, Preact, Solid, Svelte, and Vue because they point the reactive callback (via "signals") to a handler function that captures the component state in a closure. This is also why they are all faster and consume less memory than React. Because React points the reactive callback to the component function, it effectively starts from a clean slate each re-render so the purpose of React Hooks is to move state out and inject them back (thus they are called "hooks") when it re-renders. In Preact, this is not the case since it uses signals: https://preactjs.com/guide/v10/signals/ https://preactjs.com/guide/v10/signals/ A short video of the same examples if you prefer: https://youtu.be/7OhyP8H7KW0 https://youtu.be/7OhyP8H7KW0

sesm 2y ago
The blogpost in the first link doesn't mention Preact at all. Preact is mostly API-compatible with React, and it having a different underlying model is an extraordinary claim that requires extraordinary evidence. I've read the docs on Preact signals, and they look like React refs, but put outside of components. edit: the last paragraph about refs
- CharlieDigital 2y ago
  > ...a different underlying model is an extraordinary claim that requires extraordinary evidence You are looking at the syntax and not the reactivity model (how it determines what functions to call when a change happens). The post doesn't need to mention Preact because every other framework is signals-based except for React. Vue is simply the stand-in for "signals-based reactivity". Vue has different syntax from Preact (though it, too, can also use JSX), but it has the same reactivity principle. https://preactjs.com/guide/v10/signals/ https://preactjs.com/guide/v10/signals/ > What makes Signals unique is that state changes automatically update components and UI in the most efficient way possible. Automatic state binding and dependency tracking allows Signals to provide excellent ergonomics and productivity while eliminating the most common state management footguns. It uses the same underlying reactivity model as Vue, Svelte, Solid, and Qwik. Vue docs: https://vuejs.org/guide/extras/reactivity-in-depth.html#connection-to-signals https://vuejs.org/guide/extras/reactivity-in-depth.html#conn... Solid docs: https://www.solidjs.com/docs/latest/api#createsignal https://www.solidjs.com/docs/latest/api#createsignal Svelte: https://svelte.dev/blog/runes#Signal-boost https://svelte.dev/blog/runes#Signal-boost Qwik docs: https://qwik.dev/docs/components/state/#usesignal https://qwik.dev/docs/components/state/#usesignal In the blog post, Vue is the stand-in for signals-based reactivity. All signals-based reactivity models work the same way at a high level (their difference being primarily in their low-level DOM diff and update). My prediction is that even React will eventually end up signals based because of TC39 Signals: https://github.com/tc39/proposal-signals https://github.com/tc39/proposal-signals
  - sesm 2y ago
    Preact is not signals-based, it uses the React model with state and props as the basic model, but also provides Signals as a parallel model.
    - CharlieDigital 2y ago
      I guess that's like arguing a Prius Prime isn't electric because even though it has a battery and can drive all electric, it also has a gas engine. :shrug: But very clearly, Preact has the option of the exact same reactivity primitive and design as Vue, Solid, Qwik, and Svelte https://preactjs.com/guide/v10/signals/ https://preactjs.com/guide/v10/signals/ > In Preact, when a signal is passed down through a tree as props or context, we're only passing around references to the signal. The signal can be updated without re-rendering any components, since components see the signal and not its value. This lets us skip all of the expensive rendering work and jump immediately to any components in the tree that actually access the signal's .value property.