Hi @sleek lantern. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Zustand and UseRef
mortal sedgeBOT
Based on the provided knowledge sources, there is no explicit documentation or guidance from Next.js regarding storing useRef values inside a Zustand store. However, several issues and discussions highlight potential pitfalls with refs and state management in React and Next.js:
- useRef is designed to hold mutable values that persist for the lifetime of a component instance, but it is not reactive—updating a ref does not trigger a re-render.
- Zustand is a state management library that is typically used for reactive state, where changes should cause components to update.
- There are known issues in Next.js (especially with SSR, Suspense, and hydration) where refs can lose their values or behave unexpectedly, particularly when used outside their intended context or lifecycle (for example, storing them globally or in a store) private fields broken in specific case, Ref gets lost during Suspense execution.
Given these points, it is generally not advisable to store useRef values inside a Zustand store. Instead, refs should remain within the component scope where they are created. If you need to share mutable values across components, consider using Zustand for serializable, reactive state, and keep refs for local, non-reactive values.
If you have a specific use case, you may need to carefully manage the lifecycle and ensure you are not introducing bugs related to hydration or server/client mismatches.