UI isn't updating properly depending on the context provider's state
hi, my UI isn't updating properly depending on the context provider's state
24 Replies
this is how it's accessed in the child component
Are you using createContext?
yeah
I'll upload a pic of my context provider
If so, to access the context you need to use the useContext syntax to access it
I have
and that's the function in my provider
Ah, I think the problem is that you need to pass in the useContext function so in this case the useUserContext function itself and then call that in the component. Passing the result of the useContext function breaks reactivity
ooh
If I were on my computer I’d write up an example
I'll try it
thanks for the help
Np, if you can’t get it to work try to repro in the solid playground and I’ll see if I can edit it
If the issue is solved if you would close the post that’d be great. Allows other posts to get visibility
it's still being very weird
logging it works fine
but actually rendering it in the UI makes things break
I'm starting to wonder if it is because of SSR
as saving the file in VSCode which triggers hot reload makes it render properly
Try to repro in the solid playground
yep
ok
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
It seems to work here
which is really confusing me
but it kinda supports the fact that it could be server-side rendering being annoying
is there a way to disable it in solid start
?
this warning also pops up
I am not as familiar with how to debug hydration issues. Maybe @foolswisdom or @thetarnav would be able to help
I can't be of much help - except that you should not use global state like that when writing code that isn't purely client side. Yoy don't want your auth state to be the same across all users the server handles, right? 🙂
Otherwise, I'm a little confused why you are putting the value returned from useContext into the provider? The whole point is that useContext provides the value most recently (in the tree) put in to the provider (or falling back to whatever was put in the context at the createContext call)
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Hi, this works until I reload the page, where solid seems to lose track of the state
because console logging the isAuthenticated variable returns the correct value
but it displays the wrong button
and if I make the button print the value in an onclick event, it prints the correct value
which is mutually exclusive to it showing
it is purely client side, at least after the initial server side render, which defaults the login state to false
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Sorry, that's not what I meant, the state doesn't render properly when the page is loaded normally, where the state in isAuthenticated() is not equal to the state rendered in the DOM. However, when the page hot reloads, it presumably forces state updates, and the DOM becomes an accurate reflection of that value.
Turns out the fix was to add artificial delay before updating the state on the client