On: Svelte 5: Runes

[rich_harris]

Notice that you just said "You can have a list of components _where each component_ references a bit of global state". In other words, in order to avoid re-rendering everything, you need to have a component for each item in the list.

In React, the component is the unit of re-rerendering. MobX can't change that fact. The only thing you can do is work around it with hacks that imperatively update the DOM.

[vjerancrnjak → rich_harris]

Yes, this clarifies what you've meant and I can see the case that is not covered with MobX+React but I assume it is covered by Svelte's runes.

You're saying that I can have the whole app written in a single file without any separation and the updates will still happen only in the place that needs it.

That makes sense. With MobX, this could be done but not with React and not without a bunch of boilerplate that obtains html elements that are referencing the state.

[ramesh31 → vjerancrnjak]

>With MobX, this could be done but not with React and not without a bunch of boilerplate that obtains html elements that are referencing the state.

It's trivial with MobX. The Observer component essentially gives you an "inline" component wherever you need reactivity, without the need to actually componentize.

i.e using a MobX State Tree store:

  const store = types.model('Store', { value: types.string }).create({value:'But I will!'});

  const Page = () => {
    return (
      <div>
        <div><h1>I won't rerender</h1></div>
        <Observer>
          {()=> { 
            const { value } = store;
            return (
              <div>{value}</div>
            )
          }
        </Observer>
      </div>
    )
  }

[vjerancrnjak → ramesh31]

Cool, did not know that, last time I seriously used MobX was on 2016 primitives. But I see it works similarly to before. All of the accesses will be figured out during the first render.

Observer component is so simple. Just a deferred function invoke. Could have been done with 2016 primitives too.