Hydration Mismatch with makePersisted and sessionStorage

[jcalfee]

What is the best way to avoid a Hydration Mismatch on the first page load using makePersisted? Ideally, makePersisted would wait until the dom isHyrated before it changes its default to the value stored in storage.

This renders fine on the first page load:

const [getUsers, setUsers] = makePersisted(
  createSignal<string[]>([]), 
  {storage: globalThis.sessionStorage, name: 'users'}
)

<button onClick={()=> {setUsers(['user1'])}}>Add</button>
<For each={getUsers()}>
  {user=> <>
    <button class="btn join-item">
      {user}
    </button>
  </>}
</For>

Now, refresh the browser and the server will render no users, however, the 1st render on the client will render one user which causes the Hydration Mismatch. I'll make a reproduction if you think I'm in error, I'm summarizing code.

[atk]

I' am afraid this is failure by design. The hydration expects the same element to render on the server and the client, but the client has the users from session storage faster than the server, which leads to a mismatch. Our primitive behaves exactly as specified, but that becomes an issue with hydration.

How to solve this? In theory, you could block the rendering until hydration is done. Let me think about how to do this. As a workaround, you could use a memo to return an empty array until hydration. We have a nifty little lifecycle primitive you might find helpful. I might add an option where you can add an accessor that will let us block updates until truthy.

Update: I added the option. Once the PR is merged, you can use isHydrated from lifecycle inside the options to avoid hydration errors.

[jcalfee]

Thank you! Very nice solution. The new parameter is a bit generic which makes me think of defer, but defer is typically a boolean not a function, and isHydrated is very clear and the main use case.

I have a student question; why do you need to create temporary root?

2fa9cbf#diff-6799dfcaecfc137cbcfbf965a0c7a1ee9a2ba071655587553c09c13465b8be71R165

[atk]

I create the temporary root to clear the effect from memory completely.