Questions tagged [zustand]

For questions regarding Zustand, a hook-based state management system for React.

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.

231 questions
2
votes
3 answers

Unable to use zustand persist middleware

I'm working on a react-native app and I'm getting below warning after adding persistent middleware. [zustand persist middleware] Unable to update item 'todos', the given storage is currently unavailable. here is the code. import {devtools,…
2
votes
1 answer

Updating current time in child component every second in react without rendering entire screen

I am using a store in react using Zustand where I create a timer that updates the time every second using a setInterval() function. I created it in a store in hopes to pass the time to various children components while keeping the time stored and…
Matt Laszcz
  • 373
  • 3
  • 20
2
votes
1 answer

nextjs ssr cause client side state persist conflict

I use zustand to manage my states. I persist the width state in user local storage then reload and in console, I see an error like this : Prop style did not match. Server: "width:400px" Client: "width:385px" It's because the default state is 400,…
2
votes
1 answer

Mutating composite zustand object state

I'd like to break down my zustand state into smaller reusable objects; but, the documented zustand patterns all seem to involve promoting operations up to the top-level store object. Is there a way to allow mutations on the inner objects, without…
David Maze
  • 130,717
  • 29
  • 175
  • 215
2
votes
1 answer

Zustand Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Getting error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. in a next.js environment when I try to use Zustand inside a utility function /utils/myfunction.js as: import { connectToDatabase } from…
m4tt
  • 825
  • 1
  • 11
  • 28
2
votes
1 answer

Can you subscribe certain parts of a state in Zustand?

Currently, when changing states in a component, I subscribe the state to a store which updates when a function I call finishes. I do this by: useAirQualityStore.getState().updateAirQuality(); ... this.state = useAirQualityStore.subscribe(state =>…
ThrillHaus
  • 71
  • 1
  • 8
1
vote
1 answer

Add values to an array inside an object in Zustand state

I'm having a user object saved in Zustand state and it contains an array with the list of the user's favorite movies (the empty placeholder is replaced upon login). However, for some reason, Zustand is unable to recognize the user object, claiming…
CzechCoder
  • 33
  • 5
1
vote
1 answer

Problems using localStorage with Gatsby & Zustand-persist?

I am using Zustand in my Gatsby app to manage global state, one of my slices syncs with local storage using zustand-persist. I didnt catch what caused Gatsby to start failing (maybe updated dependency?) but now i get the following error when running…
1
vote
1 answer

"No storage option exists to persist the session" error when using Supabase and Zustand in a Next.js application with Clerk.dev authentication?

I have set up a Next.js application with authentication handled by Clerk.dev and data storage managed by Supabase. I am also using Zustand for state management. However, I am encountering an error that says "No storage option exists to persist the…
1
vote
0 answers

Next.js & Zustand & SignalR concurrent update issue

Hi I have admin website with list of services in the next.js. When the user updates the service using user web, it triggers the backend and the backend sends a signalR message to the admin website. Then the web receives the message and updates the…
Horang
  • 11
  • 2
1
vote
0 answers

Zustand Persist Middleware not working in an authentification Store

In my react-native app, I am trying to keep my user logged in by using the persist middleware in my zustand store but it doesnt seem to work, I do call the right methods declared in my store in my different screens (LoginScreen, LogoutScreen) but it…
Guigz
  • 41
  • 1
1
vote
0 answers

Configurable state with Zustand and Router

I have a component that renders text highlights. Currently, it takes a Zustand store as a prop (but I would like to move that store inside the component). Let's call this storeA. There are many types of highlights; I want to be able to…
Yuri Sulyma
  • 393
  • 1
  • 12
1
vote
0 answers

How can I view Zustand state with time travel debugging for multiple combined stores?

I'm really new to Zustand state management library and I'm using it for a React project with ViteJS. I have two stores using the slice pattern with bounded store to combine them. Is there anyway to view the Zustand states with time travel debugging?…
1
vote
0 answers

Zustand causing rerender even when state updates to identical item

I am using zustand for some state management. I notice with zustand, that if you update a state variable, to a clone of the exact copy of that value, I get a rerender. For example: // The zustand store: export const useStore = create((set)…
Seth Lutske
  • 9,154
  • 5
  • 29
  • 78
1
vote
0 answers

How can we prevent UI flickering in React Native when using conditional rendering?

Hello does anyone knows why UI is flickering when I implement the same logic using redux it does not happen but for reason on zustand it's happen here is my code App.tsx import { createBottomTabNavigator } from…