Comments (7)
The only problem I'm seeing with using useLayoutEffect is that developers using StrictMode and server side rendering will be seeing this warning on every single page refresh that has "useSWR(...)".
While developing that's a bit distracting.
If this warning is constantly appearing in the terminal, developers will start to ignore warnings - which is a bit against the initial idea of using StrictMode.
from swr.
If the data is already cached useLayoutEffect should avoid a double render when reading sync from cache, while useEffect will always render with empty data and again with data
from swr.
@pacocoursey @sergiodxa What do you think about the solution used in react-redux for this exact problem?
https://github.com/reduxjs/react-redux/blob/2eac86163be2bd5627dab3e33e8b4e0926895442/src/hooks/useSelector.js#L22
// React currently throws a warning when using useLayoutEffect on the server.
// To get around it, we can conditionally useEffect on the server (no-op) and
// useLayoutEffect in the browser. We need useLayoutEffect to ensure the store
// subscription callback always has the selector from the latest render commit
// available, otherwise a store update may happen between render and the effect,
// which may cause missed updates; we also must ensure the store subscription
// is created synchronously, otherwise a store update may occur before the
// subscription is created and an inconsistent state may be observed
const useIsomorphicLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect
from swr.
@bmvantunes πon it
Could you file a PR with a comment to explain? I'd love to merge it.
from swr.
@quietshu sure! Tomorrow I'll file the PR π
from swr.
Thanks for the explanation, it makes sense π
Is there anything I can do in order to remove the warning during server rendering?
from swr.
I think it's not possible, since useLayoutEffect
is intended to avoid double render but doesn't run server side when doing SSR you are still going to have a double render, the SSR without data and the CSR with cached data.
from swr.
Related Issues (20)
- Cache flaw: mutate of cache keys is ignored when no consuming hook is mounted
- Bound Mutate does not update state but useSWRMutation does HOT 2
- TYPESCRIPT: Axios fetcher(METHOD POST) + NextJs SSR = URL Malformed HOT 1
- Infinite does not revalidate all pages when the zeroth one changes HOT 2
- Conditional rendering does not have correct type
- Bound/global mutate functions do not mutate remote data HOT 3
- bug: type error on updating cache with bound mutate HOT 1
- RSC Example doesn't work HOT 6
- onDiscarded is never called
- TypeError: Cannot read properties of null (reading 'useContext') HOT 1
- useSWRInfinite with revalidateAll: true revalidates all pages when loading next page HOT 1
- Cache specific key only
- useSWRMutation is not working with React Native New Architecture.
- useSWRInfinite does not return data until all pages are fetched HOT 2
- `useSWRSubscription` suspends forever, never calls `subscribe` when `suspense` is `true` HOT 1
- isLoading is initially false when there is no data for conditional queries.
- sometimes it automatically request again οΌbut the key has not changed
- Calling `setSize` before pages finish loading causes `useSWRInfinite` to trigger multiple requests HOT 2
- Visiting 404 Not Found clears all SWR Cache
- useSWRInfinite has missing types
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 swr.