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

Hydration Mismatch within ActionForm with InnerComponents #527

Closed
Indrazar opened this issue Feb 16, 2023 · 0 comments
Closed

Hydration Mismatch within ActionForm with InnerComponents #527

Indrazar opened this issue Feb 16, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@Indrazar
Copy link
Contributor

See this repository for reproducing this issue.
Specifically lines 44-48 of app.rs

With the following nodes in a view! macro the hydration will panic after receiving SSR.

<ActionForm action=send_string>
    <InnerComponent/>
    <p>"text"</p> //commenting this or any other line within the actionform prevents ssr/csr mismatch panic, but there are still warnings
    <input type="text" name="input2"/>
    <p><input type="text" name="input3"/></p>
    <p><input type="text" name="input4"/></p>
</ActionForm>

Starting with all lines within the ActionForm commented out: uncommenting one line at a time after the InnerComponent adds a hydration warning with each uncommented line. With all lines uncommented the hydration panics.

The InnerComponent implements an input field within a Suspense.

<Suspense fallback=move || view!{cx, <div>"Loading"</div>}>
  {move || {
      string_resource.read().map(|n| match n {
          Err(_) => view! {cx, <div>"Load Failed"</div>},
          Ok(value) => view! {cx, <div><input type="text" name="input" value=value/></div>},
      })
  }}
</Suspense>

If this is the only node uncommented there is no hydration error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants