Using signal outside of component.

[codart1]

First of all, this is an amazing library and I'm just trying to understand how it works.

The automatic dependencies tracking is a bit magic to me but I think I've got the basic idea. But after playing around, I see that the createEffect won't work if I use it outside of a component:

// create a signal and register an effect outside of a component:
const [count, setCount] = createSignal(0);

createEffect(() => {
  console.log(count()); // won't trigger ???
});

setCount(6);
setCount(7);
setCount(8);

I'd love to know why and how, thanks

[ryansolid]

This thread probably has the best explanation:
#242

The basic of it is while it isn't restricted to components, Solid's reactivity is built with frameworks in mind so it has automatic disposal and scheduling so it needs to run inside a Reactive Root. It isn't necessary to be components but it means that there is a wrapper. I hide that wrapper inside Solid's render function.

It is more than disposal though too since it is how we manage synchronous scheduling. Like wrapping your whole example in a createRoot would only log 8 (since effects are scheduled to the end). If you just want to play around to get a feel for the reactivity without worrying about components, check out this codesandbox: https://codesandbox.io/s/derivation-j0nzm?file=/index.js

[mdovn]

Thanks for your lighting fast answer. I have 2 more questions:

1. You mentioned abount synchronous scheduling. Is it safe if I do async stuff inside createEffect? Like subscribing to a signal after a fetching.
2. What if I need to subscribe to a signal outside of solid reative context.

[mdovn]

I’m reading your link. I think you already created the best answer there

[mdovn]

Nvm if you realize that 2 persons are talking to you, both account are mine :D

[ryansolid]

To your questions:

1. You are better off having the fetch set a signal that runs an existing computation. You can make createEffect async but it won't track after the await. Once you trigger a signal though the synchronous graph will fire up and work as expected.
2. How to **subscribe** to a state/signal outside a solid component? #315

[weijarz]

@ryansolid
It seems to be working for now: https://playground.solidjs.com/?hash=-639933433&version=1.4.1
Does Solid now allow for using singal outside of component?

[ryansolid]

It's always allowed a signal outside, but now effects aren't broken outside a root.

[btakita]

@ryansolid Does it make sense to extract these primitives into a model-oriented npm package? Similar to how nanostores extracted a svelte compatible store library usable across component libraries & even in model-oriented libraries. Of course one could have solid as a dependency but solidjs seems like it's a ui-oriented package. I can see using solidjs as a dependency for model-oriented libraries, but using a ui library just for it's models (e.g. svelte) is a bit of a harder sell...presumably because some would not want to have multiple ui libraries as dependencies.

[ryansolid]

This is happening as part of 2.0.

[astoilkov]

@ryansolid I've tried to find information about this at https://github.com/solidjs/solid-workgroup but couldn't.

I'm experimenting with using Solid reactive primitives for use outside of UI components because: 1) the reactive primitives are great and some external code/packages can benefit reactivity, 2) the code will integrate great with Solid apps, 3) the code can also be used outside of Solid.

Is there a place I can follow the progress of this?

[MariuzM]

Man having state outside component is epic i used to use Zustand in React, even now i have solid-zustand but I'm just thinking is there any reason to use this instead of just having a separate file with my signals and use them where i need it?

Amazing framework, using SolidStart to build my sass project.

[drecdroid]

Similar to me, I'm using nanostores along with @nanostores/solid as I'm not sure how stable is to use solid stores/signals outside components. This brings the question, are we ready to use stores/signals outside components without any unexpected behavior?