#UI isn't updating properly depending on the context provider's state

52 messages · Page 1 of 1 (latest)

frozen bobcat
#

hi, my UI isn't updating properly depending on the context provider's state

image.png
#

this is how it's accessed in the child component

solemn ravine
#

Are you using createContext?

frozen bobcat
#

yeah

#

I'll upload a pic of my context provider

solemn ravine
#

If so, to access the context you need to use the useContext syntax to access it

frozen bobcat
#

and that's the function in my provider

solemn ravine
#

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

frozen bobcat
#

ooh

solemn ravine
#

If I were on my computer I’d write up an example

frozen bobcat
#

I'll try it

#

thanks for the help

solemn ravine
#

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

frozen bobcat
#

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

solemn ravine
#

Try to repro in the solid playground

frozen bobcat
#

yep

#

ok

frozen bobcat
#

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

image.png
solemn ravine
#

I am not as familiar with how to debug hydration issues. Maybe @reef badger or @half badger would be able to help

reef badger
#

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)

wild delta
#

Hi

#

simply create a value object and set the value of the context provider to it

#

and i think you shouldnt set the value to useContext(...) like you've done
instead

const value = {
              isAuthenticated,
              setIsAuthenticated,
              sessionId,
              setSessionId,
              }
#

then
<UserContext.Provider value={value}> ... </UserContext.Provider>

#

or better still, set the value to an array that contains the session, isAuthenticated, and toggleIsAuthenticated

#

like so

const value = [ isAuthenticated, sessionId, toggleIsAuthenticated : {
  on: () => setIsAuthenticated(true),
  off: () => setIsAuthenticated(false),
} ]
#

then you can access the context like so:

const [isAuthenthicated, sessionId, toggleIsAuthenticated] = useUserContext()
#

You can use <Switch>...</Switch> component for the conditional rendering you login/logout button

frozen bobcat
#

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

frozen bobcat
#

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

frozen bobcat
wild delta
wild delta
wild delta
frozen bobcat
#

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.