Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve hydration behavior and flag name #46

Closed
fa-sharp opened this issue Oct 10, 2023 · 0 comments
Closed

Improve hydration behavior and flag name #46

fa-sharp opened this issue Oct 10, 2023 · 0 comments

Comments

@fa-sharp
Copy link
Contributor

fa-sharp commented Oct 10, 2023

The changes in #42 are working pretty well. The only thing I've noticed is that when I change the value of key, there is a brief moment where the app is still rendering the old value, before loading the value of the new key. This can cause unintended flashes of old content. Ideally, the render value should reset to onInit (or run onInit if it's a function) during that brief period, until the new key is hydrated.

The solution is pretty simple - we just need to reset the render value to onInit in the cleanup function here:

storage/src/hook.ts

Lines 92 to 95 in 282b946

return () => {
isMounted.current = false
storageRef.current.unwatch(watchConfig)
}

Another related (small) issue - there is a useful boolean flag in the onInit function to determine the hydration status. I think isHydrated would be a better name than isHydrating for what it's indicating. It is set to true when the value has been actually loaded from storage:

type Setter<T> = ((v?: T, isHydrating?: boolean) => T) | T

I can submit a PR when I have a chance :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant