mirror of
https://github.com/leptos-rs/leptos
synced 2024-11-10 06:44:17 +00:00
example/counter_isomorphic Removed console warning. (#2244)
This warning is seen in the browsers console window. ``` counter_isomorphic.js:1068 At src/counters.rs:138:17, you are reading a resource in `hydrate` mode outside a <Suspense/> or <Transition/>. This can cause hydration mismatch errors and loses out on a significant performance optimization. To fix this issue, you can either: 1. Wrap the place where you read the resource in a <Suspense/> or <Transition/> component, or 2. Switch to using create_local_resource(), which will wait to load the resource until the app is hydrated on the client side. (This will have worse performance in most cases.) ``` Two derived signals "value" and "error_msg" need to be wrapped in a <Suspense> block. "value" falls back to just the initial text. "error" uses the default fallback.
This commit is contained in:
parent
fb97c50886
commit
0cba7bc22b
1 changed files with 13 additions and 16 deletions
|
@ -132,15 +132,6 @@ pub fn Counter() -> impl IntoView {
|
|||
|_| get_server_count(),
|
||||
);
|
||||
|
||||
let value =
|
||||
move || counter.get().map(|count| count.unwrap_or(0)).unwrap_or(0);
|
||||
let error_msg = move || {
|
||||
counter.get().and_then(|res| match res {
|
||||
Ok(_) => None,
|
||||
Err(e) => Some(e),
|
||||
})
|
||||
};
|
||||
|
||||
view! {
|
||||
<div>
|
||||
<h2>"Simple Counter"</h2>
|
||||
|
@ -150,15 +141,21 @@ pub fn Counter() -> impl IntoView {
|
|||
<div>
|
||||
<button on:click=move |_| clear.dispatch(())>"Clear"</button>
|
||||
<button on:click=move |_| dec.dispatch(())>"-1"</button>
|
||||
<span>"Value: " {value} "!"</span>
|
||||
<Suspense fallback=move |_| view!{ <span>"Value: "</span>}>
|
||||
<span>"Value: " { counter.get().map(|count| count.unwrap_or(0)).unwrap_or(0);} "!"</span>
|
||||
</Suspense>
|
||||
<button on:click=move |_| inc.dispatch(())>"+1"</button>
|
||||
</div>
|
||||
{move || {
|
||||
error_msg()
|
||||
.map(|msg| {
|
||||
view! { <p>"Error: " {msg.to_string()}</p> }
|
||||
})
|
||||
}}
|
||||
<Suspense>
|
||||
{move || {
|
||||
counter.get().and_then(|res| match res {
|
||||
Ok(_) => None,
|
||||
Err(e) => Some(e),
|
||||
}).map(|msg| {
|
||||
view! { <p>"Error: " {msg.to_string()}</p> }
|
||||
})
|
||||
}}
|
||||
</Suspense>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue