Context not working as expected
Hi everyone. I’ve got a strange behaviour in my project. I want to use my context as a global state manager so when I pass a function which has my useContext function in it to an addEventListener, when the addEventListener is fired I don’t have the correct value of the store contained in my context but only the default value.
9 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
The event listener is not inside the reactive scope and thus cannot get its context value; you need to get the context outside of it.
Otherwise, snnsnn is correct.
So get the value before and pass it as parameter of this function
I use the Context as a stage manager for my auth part so with a store with actually only the accessToken and some function like Login Logout. I was inspired by how Pinia work in VueJS. And then I wrap my whole application with that context and then can use wherever I need to my useAuth which allow me to retrieve the reactive data of my AuthContext’s store
Is this approach correct ?
I'm having a similar problem. I was expecting to use context for accessing a webworker, with the component rendering pass setting up some infrastructure. However, the context is always the default value during the component rendering... context really only works for pure data that can be reactive. The provider does not get initialized until after its children have been rendered, so they'll always render as if there were no outer context available.
I can't simply use global state instead of context, since I do need a webworker per root.
The tutorial example for context shows how to use a context value in an event.
https://www.solidjs.com/tutorial/stores_context?solved
I don't think it's true that the context provider gets initialized until after it's children have been created. The value of the context is there when the children are created. Of course, if the context does something asynchronous, it won't delay the creation of the children of the context provider. Is it that you expect the result of some asynchronous operation to be there when the children are created?
If I set breakpoints in my context provider and at the call to
useContext, the latter gets hit first... I can't explain that any other way. Solid will render children, then create the parent, then add the children to the parent, right?Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Here is a modified example of the tutorial example for the context:
https://playground.solidjs.com/anonymous/7f71afb4-5572-4fe5-9549-c95bbb02286b
It prints first
CounterProvider and then App
I'm not sure why you observe something different with the breakpoint. One possibility is that you hit the breakpoint on another instance that is outside the context?That is possible. Thank you!
FWIW, I resolved my problem. It was not another instance. It was due to the fact that I destructured props in my provider component, since I don't need reactivity there. Since I accessed
props.children in that destructuring, it created the children too early.