Comments (3)
@fasiha Maybe instead of onMount you could use https://primitives.solidjs.community/package/lifecycle#ishydrated as a way to check if you are safe to change the signal π€
Edit: I guess isHydrated
does only make a difference if your app is hydrated only once. If you do something like below the user
is correctly rendered in the indirect
case.
function bootstrap(el: any, indirect: boolean, renderId: string) {
(indirect ? render : hydrate)(
() => (
<Suspense>
<Avatar indirect={indirect} />
</Suspense>
),
el,
{
renderId,
}
);
}
from solid.
I see the issue it is just a bit tricky. The we are pretty lax when it comes to hydration in that we assume the server is correct and we don't correct text mismatches. If someone interacts with the page then we cancel hydration/streaming and apply the new state. However, if things are still hydrating we continue to assume the server is correct. What is happening in the example here is that since the one place is hydrating it assumes it doesn't need to do work but the signal under it has changed. So while the signal is being tracked and would update on another change it doesn't try to write the DOM initially.
That being said in general lazy hydrating + shared state is just not a good idea. Because the client state can change and if it is shared hydration will break. Like consider a global counter that can be incremented and the lazy hydrated component shows/hides stuff based on whether the count is above 5. If anything changed the counter before it hydrated you'd have serious hydration errors. This error was less serious and wasn't detected, but it would cause hydration issues just the same in other solutions that were stricter.
from solid.
@ryansolid ahh, understood, thanks for that cogent explanation! Adding a onMount(() => console.log("Mounting β¦", new Date().toISOString()))
to both components reveals that the incorrect behavior happens only when the signal-reader component (AvatarSolid
in the example) is hydrated after the signal-setter component (User
): the newly-hydrated component never "heard" the signal being set.
If I can burden your generosity some more. Should I just abandon the hydration + shared state model? Is that just a Bad Ideaβ’οΈ?
Or does one just have to be careful about this pitfall by making the signal-writer (User
) write the signal only after it's confirmed that all readers have been hydrated? A terrible workaround might be to just wait 100 ms after page load to write to the signal. Are there better ways to work around this or should I just give up?
Edit: another terrible approach is to use an object as the signal's contents, and then in every hydrated reader component's onMount
, check if the signal's contents have been updated client-side and if so, reassign the signal. In the context of my example:
// in signals.tsx
export const [user, setUser] = createSignal<{
user: string | undefined;
}>({ user: undefined }); // undefined = server-side
// in User.tsx, the signal writer component
export const User: Component = () => {
onMount(() => {
const savedUser = localStorage.getItem("user") ?? ""; // string = client-side
if (savedUser) setUser({ user: savedUser });
});
// ...
}
// in AvatarSolid.tsx, the signal reader component
export const AvatarSolid: Component = () => {
onMount(() => {
if (user().user !== undefined) setUser((x) => ({ ...x })); // cause a rerender if this component is hydrating late
});
// ...
}
from solid.
Related Issues (20)
- [Bug] Repeated call syntax in JSX breaks reactivity HOT 1
- [Astro] resource and signal rendering is mixed up on the client HOT 2
- Refs don't work correctly when using dynamic
- Refs don't work when optional on a component HOT 4
- Cannot use istanbul ignore comments for generated code HOT 2
- setting element reference in `setStore` modifies the values in the array HOT 13
- `this` inside jsx-template inside a constructor of a derived class causes transformation-bug HOT 2
- The update of props is not granular enough. HOT 4
- No value attribute on CSR, but present in SSR
- Cannot properly bind numbers to Select HOT 1
- Double mounting for children element. HOT 2
- Is [email protected] active now? HOT 2
- Enhancement - Prop destructuring HOT 4
- [SSR/Astro] DOM Not Updated from State by Client Updates onMount HOT 5
- Boolean attributes HOT 1
- JSX does not wait for transitions to complete when using a ternary in a prop value HOT 4
- What is the minimum browser support for SolidJS? HOT 2
- TypeScript doesn't give error when calling a SetStoreFunction<T> where T is an array of objects HOT 13
- SyntaxError: The requested module 'node:events' does not provide an export named 'addAbortListener' HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from solid.