Creating custom SolidJS hook that can be used in a global scope
Need some help understanding how to build a custom SolidJS hook that can be used both locally inside a component and outside in the global scope (like
createSignal
can).
Below is. a small snippet of a custom hook I am writing:
The question I have is around the floating createMemo
that I use in the implementation. When I use the createDatabase
hook globally, I get greeted with the console warning:
computations created outside a 'createRoot' or 'render' will never be disposed
I'm not familiar with how to properly address that warning and hoping the community can offer some guidance here.10 Replies
This part of the tutorial should help: https://www.solidjs.com/tutorial/stores_nocontext
SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
Namely wrap your memo in
createRoot
Ah, excellent. It's either that or I wrap the entire export of my function in a
createRoot
is another option as well correct?Yeah that's also an option
Ah actually maybe no
As long as the
createMemo
is inside the createRoot
you can do whatever else you wantGotcha -- so it seems I can take one of those two approaches. Really appreciate the insight!! Thank you!
No worries, all you're really doing is silencing the warning
The
createMemo
will still never be disposed since you don't manually dispose the root
But that's your intended behaviourAre there any potential downside to use hooks in a global manner for SPAs?
Not that I'm aware of
Testability may be one
Ah, yeah, I can see that becoming a problem for sure
Good call
We have renderHook in
@solidjs/testing-library
, so testability should be covered.