Can I create stores out of component and use it in components?

[weijarz]

I am translating a project which use global stores to Solid.
Is it safe to create global store then use these in components?

Example:

// Create store
let store, updateStore, increment
createRoot(() => {
  ;[store, updateStore] = createStore({ count: 1 })
  increment = () => updateStore('count', v => v + 1);

  createEffect(() => {
    console.log(store.count)
    onCleanup(() => {
      console.log('cleanup', store.count)
    })
  })
})

// Use
function Counter() {
  return (
    <button type="button" onClick={increment}>
      {store.count}
    </button>
  );
}

[ryansolid]

Yes. The important thing to know is that roots can be disposed of. If it's truly a singleton then it probably doesn't matter. But if you ever need to dispose a root it's the function passed to the first argument of createRoot.. You can always hoist it out:

let dispose;
createRoot((d) => {
  dispose = d;
  // reactive stuff
});

// somewhere else when you want to clean up.
dispose();