How to force update on client if value is loaded from Localstorage for fullstack mode

[wackazong]

I have a custom hook that synchronises state with the localStorage, like in the Dioxus docs. Problem is that in fullstack mode, the initial page is rendered on the server. How can I make sure that a render is triggered on the client to insert the correct value?

[ealmloff]

In fullstack, we need the initial value to be the same on the server and client for hydration. Because we don't know the client value on the server, the value must be the default initially.

The storage example hook in the docs is based on the code in dioxus storage which is upstreamed in DioxusLabs/sdk#17. It returns None for storage on the server and client on the first renderer and then immediately queues a re-render for after hydration to replace the default value with the value from storage:

https://github.com/ealmloff/dioxus-std/blob/storage/src/storage/mod.rs#L97-L119

[wackazong]

Thanks for the explanation. I tried to do something similar with the example given here https://dioxuslabs.com/learn/0.5/cookbook/state/custom_hooks#composing-hooks but I could not get the re-render to work. Even if the correct value is loaded from Localstorage on the client, the DOM ist not updated.

I uploaded a minimal example here: https://github.com/wackazong/dioxus-fullstack-localstorage

You can see the default value (or a value already retrieved from Localstorage) is written to the console, but the DOM is not updated, also not when I click the update button.

I am missing somthing simple here, I am quite sure. Could you help me out?

[wackazong]

Ok, managed to get it working based on your code reference. Thanks! Working example is at https://github.com/wackazong/dioxus-fullstack-localstorage. I had to use the generation function to discern the different renders.