Hydration Mismatch error when resource passed as a prop
Hey!
I have a simple component that creates a resource, and then passes it to a child comopnent, but when I put the child component in a
Show component to check when resource.state is 'ready', I get a Hydration Mismatch error.
As a side note, when I pass the prop without the Show component, I just don't get the updated data passed down, which I don't understand, since in the docs it says that in order to keep the reactivity it has to be done the way I did it.
Thanks 🙂
8 Replies
Use
{ deferStream: true } as the option on createResource() otherwise the response will start streaming before the promise has settled (of course that means you need a <Suspense> boundary somewhere).I think I'm more confused the more I use SolidStart...
https://github.com/Hillel-Nagid/web
this is the repo I'm working on
currently I have 3 issues.
1 - in the inventory page, I know I'm doing extra work for no reason instead of using
mutate, but still both ways do not update the UI once there is a resource ready (even though the log is shown in the console
2 - when running the app for the first time, I always get an Hydration Mismatch error, but if I go into the inventory page, and from the navbar navigate to the main page, everything works fine.
3 - when I access any /inventory/[item] page, I just get a non debuggable Hydration Mismatch error.
I don't really know wether I should just oprn a new post with all these issues...GitHub
GitHub - Hillel-Nagid/web
Contribute to Hillel-Nagid/web development by creating an account on GitHub.
#1: In
Table.tsx:
You are destructuring so you are breaking reactivity.
#2: This style attribute crashes SSR:
#3: At this point I can't reproduce that behaviourOk, thank you for your help with the first two!😀
I'll see if I can get a better and narrower example to reproduce the third
For #1:
Also going forward:
Again, thanks
You helped me understand better some of the Solid principals
Rule of thumb:
For when rendering objects (which are keyed by reference), Index when rendering primitive values where it's OK to just swap text nodes rather than an entire “row UI fragment”.MDN Web Docs
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms...
In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods or properties. There are 7 primitive data types: