Comments (13)
Let me reopen this.
I'm currently supplementing with createContext and useContext for anything SSR-related
Where can I find such examples with useContext, so that I can start learning? There must be something in the nextjs docs.
from zustand.
I think I would need some help for that, I donβt understand ssr good enough, but would gladly welcome prs.
from zustand.
I tried to set the default state with storeApi but This package is based on React Hooks
and using useLayoutEffect
hooks.
That is problem that makes server side rendering broken.
Is there any other way to set default state dynamically without update DOM?
from zustand.
could you explain why useLayoutEffect is a problem when it comes to SSR?
from zustand.
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
Above error message keeps being logged.
I found react-redux
uses useLayoutEffect
only if window
is defined or uses useEffect
.
typeof window !== 'undefined' ? useLayoutEffect : useEffect
Can it be the solution to this case?
Related issue:
from zustand.
yes, i guess that could be. could you try? you can copy this: https://unpkg.com/[email protected]/dist/esm/index.js into a local "zustand.js" and change it to useEffect. if it works i'll implement the patch.
from zustand.
@drcmda
Okay ! i will make a pr :D
from zustand.
can this issue be closed? does it work? thanks!
from zustand.
from zustand.
That PR never landed in the repo π
from zustand.
Can we revisit this issue?? Seems there was never a solution implemented.
from zustand.
Hi, is it about hydration not working, or is it completely broken with next? Would you like to file a new issue please?
Note: useIsoLayoutEffect is just a hack to eliminate the warning message. It doesn't do anything for SSR.
from zustand.
I changed my mind. Let me close this and continue discussion in #182.
from zustand.
Related Issues (20)
- Cant user Array of Map type to store data
- overview of the zustand API HOT 1
- Persist storage : values are converted to strings before replacer
- Value is empty on initial render and sets after few milliseconds
- Immer Middelware Typescript error: Exported variable 'useMyStore' has or is using name 'WritableDraft' from external module "../node_modules/immer/dist/immer" but cannot be named.
- blacklist and whitelist
- Argument of type '(state: ClientStore) => Client | undefined' is not assignable to parameter of type 'ClientStore | Partial<ClientStore> | ((state: ClientStore) => ClientStore | Partial<ClientStore>)'. Type '(state: ClientStore) => Client | undefined' is not assignable to type '(state: ClientStore) => ClientStore | Partial<ClientStore>'. Type 'Client | undefined' is not assignable to type 'ClientStore | Partial<ClientStore>'. Type 'undefined' is not assignable to type 'ClientStore | Partial<ClientStore>'.ts(2345)
- The value I save to storage with persist is delayed when the page refreshes.
- State updated in one component but not in another one
- Typescript + Slices = trouble HOT 7
- Setting nested state make the other states change (their values didn't change)
- zustand concurrent update issue
- Typo in GitHub "About" HOT 1
- import { create ,WritableDraft} from "zustand" HOT 1
- Introduction Zustand page a documentation typo HOT 1
- Ts error on type annotation HOT 3
- Persist middleware keeping old versions of functions around. Breaking apps when deploying to prod
- devtools with option `serialize.immutable` does not deserialize state from devtools correctly (broken redux devtools "Jump" / "Revert" etc.)
- state empty on first render HOT 1
- onRehydrateStorage is invoked before storeage.getItem HOT 1
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 zustand.