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

example/counter_isomorphic Removed console warning. #2244

Merged
merged 1 commit into from
Feb 2, 2024

Conversation

martinfrances107
Copy link
Contributor

@martinfrances107 martinfrances107 commented Jan 30, 2024

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 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.
@martinfrances107
Copy link
Contributor Author

In terms of review...

I am constantly dipping in and out of the these examples...

so I want them to be as close to a golden reference as possible

if you want a different solution.. say involving Transition and create_local_resource
just let me now and I will put in any extra work needed.

@benwis
Copy link
Contributor

benwis commented Feb 2, 2024

Hi Martin! This change looks good, thanks for updating the example

@benwis benwis merged commit 0cba7bc into leptos-rs:main Feb 2, 2024
9 checks passed
@martinfrances107 martinfrances107 deleted the counter_isomorphic branch February 2, 2024 09:42
gbj pushed a commit that referenced this pull request Feb 8, 2024
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.
gbj added a commit that referenced this pull request Feb 9, 2024
videobitva pushed a commit to videobitva/leptos that referenced this pull request Feb 17, 2024
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.
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.

2 participants