Hacker News Reader

Comment by epmatsw | Hacker News Reader

This looks like it’s moving closer to React Hooks, but using the compile step to optimize them out? Kinda like a better React Forget?

View on HN

This might be the impression on first glance because it uses the word "state." But keep reading, and its much more akin to what Solid is doing. In fact, the new docs openly credit the work Solid's team is doing. They also credit Knockout's approach form way back in 2010.

Under the hood it's doing something more similar to solid, but the API exposed is a step in the direction of React (it doesn't expose the signals to the user). It's not quite React either because there's no 'setter', just a different way to opt in to reactivity which also (IIUC) makes it possible in .js/.ts files

For a second, ignore Hooks, Signals and Runes, and look at the way Runes were presented in the video "Introducing Runes.. with Rich Harris". You will find this presentation very similar to but much shorter than "React Today and Tomorrow and 90% Cleaner React With Hooks" video. Both of them talk about:

1. primitives for managing state - $state vs useState

2. removal of lifecycle mechanisms - onMount vs componentDidMount

3. replacing lifecycle mechanisms with new primitives - $effect vs useEffect

It's like the Svelte team took a leaf out of React team's book on how to upgrade a framework - this is evident by the way these features are presented as opt-in like how React marketed Hooks as opt-in. I would go on to predict that the upgrade to Runes will just like the upgrade to Hooks. Developers will use it and then love it - because it presents improvements to the way codebases will be structured and maintained just like React did with Hooks. This is really a Hooks moment for Svelte. Good job Rich and the Svelte team!

For sure. Look at this Svelte 5 example:

  $effect(() => {
    const timer = setInterval(() => {
      time = new Date().toLocaleTimeString();
    }, 1000);

    return () => clearInterval(timer);
  });

</script>

<p>Current time: {time}</p>

This example is a bit strange to me. I wonder if `$effect` will actually replace all usage of `onMount` and `onDestroy` for Svelte. In Solid you could totally do these things with `useEffect` too, but they chose to keep `onMount` and `onDestroy` (which they call `onCleanup`) to make this kind of thing more simple.

Example: https://www.solidjs.com/examples/counter

`onMount` and `onDestroy` feel like really useful, dependable callbacks. `$effect` is scary because if you add a reference to state in it, you can't depend on it being called like `onMount`.

They don't claim they'll remove `onMount`.

They claim most (but not all) of current usage of `onMount` will be better off using `$effect` instead

I kind of feel the same. React and all the new stuff now feels like unnecessary complexity but they definitely got the initial DX right

The fact that the frameworks are converging on the same idea should suggest that it is necessary complexity in the framework for any sufficiently complex app.

Or that they are too invested to drop features in place of adding more? When this happens, incumbent frameworks appear. Svelte was one but it became just like the old ones before its prime time.

It looks so close to react hooks, that is the first thing that struck me. Of course the syntax is slightly different but functional it is mostly the same. It seems weird that we are definitely converging between the various frameworks. For a while with svelte I though we were diverging but that seems to be changing now.

Reply on news.ycombinator.com