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

[WIP] Fix hydration warning #18

Conversation

thorsten-stripe
Copy link

Fixes #17

The SSR hydration warning can be avoided by always initialising with the defaultState and then subsequently updating the state in a useEffect.

There is quite a major downside to this though, as the initial render will happen with the defaultState with am immediate re-render, which isn't ideal.

I don't think this is the right solution, but wanted to submit this to get your thoughts on the matter.

@codecov-commenter
Copy link

Codecov Report

Merging #18 into master will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##            master       #18   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            4         4           
  Lines           70        75    +5     
  Branches        16        17    +1     
=========================================
+ Hits            70        75    +5     
Impacted Files Coverage Δ
src/common.ts 100.00% <100.00%> (ø)
src/reducer.ts 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bd0a73e...9c0e15f. Read the comment docs.

@thorsten-stripe
Copy link
Author

Another potential solution would be to initially return null until we had the chance to check the localStorage, that way you can employ conditional rendering to avoid the "flicker", but none of this feels great for non-SSR applications :(

@soyguijarro
Copy link
Owner

soyguijarro commented Jun 18, 2020

Hey @thorsten-stripe! Thanks a lot for bringing this up and looking into it. Returning undefined initially and then updating in the first useEffectcall is actually what a previous version of the library did... and someone got rightfully confused by it and opened an issue 😅 It's been fixed since then. As you say, that wouldn't feel great, neither returning defaultState.

I think this use case would be covered by adding support for async storages, which is a feature that has been asked for. If the API of the hooks were async, returning null/undefined in the first render would no longer feel confusing (it would return a loading boolean as well, similar too Apollo hooks if you're familiar with those; or use a state machine maybe). Do you think something like that would work for you?

@thorsten-stripe
Copy link
Author

Thanks, @soyguijarro, yes, I think the async approach and the loading boolean would solve this, thanks :) I'll close this one out.

@thorsten-stripe thorsten-stripe deleted the fix/ssr-hydration-warning branch June 24, 2020 13:57
@thorsten-stripe thorsten-stripe restored the fix/ssr-hydration-warning branch June 24, 2020 13:57
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

Successfully merging this pull request may close these issues.

SSR hydration warning
3 participants