4.4.1 version throws an error "Cannot read properties of null (reading 'useRef')"

[Bigpawn]

react: 18.2.18
react-dom: 18.2.7
zustand: 4.4.1

[dai-shi]

Is it specific to 4.4.1?
Does it work with other versions?

[Bigpawn]

Yes, I can run it after switching to 4.4.0.

[Bigpawn]

In React 18.2.0 and react-dom 18.2.0, zustand 4.4.1 can run without any issues.

[dai-shi]

So, what's the issue?
4.4.0 and 4.4.1 have very little differences.

[dbritto-dev]

BTW, react and react-dom should have the same version. So that could be the issue not zustand.

[HIPPIEKICK]

I get the same error with react 18.2.0 and zustand 4.4.2, 4.4.1 and 4.4.0.

[michalbe]

Is there a fix for this issue? I experience it with zustand 4.4.1 and react 18.0.2

[dbritto-dev]

Would you mind trying with zustand v4.4.7?

[suedacicekli]

I continue to encounter this error in React 18.2.0 and Zustand 4.4.7. Is there a solution available ?

[dai-shi]

Would you be able to create a minimal reproduction?

[StrangeGuy77]

I encountered this error while working outside a React component, if this is the case for someone reading this, try with this section of the official docs as accessing store the normal way outside a component will render this error.

if this is not your case, hope someone can drop another solution for ya <3

[milos201]

I get this: TypeError: Cannot read property 'useRef' of null in react native android production build.
On the first line inside App component:

const hasHydrated = useStore(state => state._hasHydrated)

[dai-shi]

Is it about v4.4.1? Can you identify which version works and which version breaks it at first?

[easyTree]

I'm experiencing this in a react-native app inside an npm workspace.
zustand@4.5.2

[easyTree]

So, this turned out to be caused by indirectly having multiple versions of react in the same monorepo.

I had one dependency:
"react": "18.2.0" in my react-native project

and two:
"react": "^18.2.0" which actually resulted in "18.3.1" (or similar) in each of two web apps.

Ensuring there was only a single version fixed it.

[dai-shi]

I need someone to help investigation this.

• Is this react-native only issue, or can it be reproduced with react-dom?
• Which version of zustand first causes it and which PR is the root cause?
• What would be a possible suggestion for a fix

[dai-shi]

And, if v5-alpha helps it or not.

[easyTree]

From my perspective, it's caused by multiple versions of react - see comment above.

[yuraBrimit]

Hello everyone!

Unfortunately, I can still reproduce this error on versions
react: 18.2.0 and 18.3.1
react-dom: 18.2.0 and 18.3.1 (the same as above)
react-native: 0.72 and above (tried on 0.73.0, 0.73.4, 0.74.5)

I encountered this error when I wanted to update a project from react-native version 0.71.18 to version 0.74.5

I've tried to create a new project in my app folder and also adjust the old one to the new requirements.
React version was forced to be the same in monorepo

[milos201]

Hello everyone!

Unfortunately, I can still reproduce this error on versions react: 18.2.0 and 18.3.1 react-dom: 18.2.0 and 18.3.1 (the same as above) react-native: 0.72 and above (tried on 0.73.0, 0.73.4, 0.74.5)

I encountered this error when I wanted to update a project from react-native version 0.71.18 to version 0.74.5

I've tried to create a new project in my app folder and also adjust the old one to the new requirements. React version was forced to be the same in monorepo

For me that was happening because I upgraded react version manually and react-native didn't support it.

[yuraBrimit]

For me that was happening because I upgraded react version manually and react-native didn't support it.

The React version 18.2.0 (18.3.1) for 0.71.18 and for 0.74.5 is compatible. I'm not sure with it, because as I said, I've tried to upgrade project with 2 ways: manually and automatically. Both ways have the same result

[yuraBrimit]

Hi everyone!

I may have found a solution (that helped me at least): I simply removed react and react-dom libraries from the package.json file of the react-native app, but left it in the main monorepo.
maybe it's similar to the method used to create a store without react with zustand/vanilla

[dbritto-dev]

@yuraBrimit that's the right way to fix it, in monorepos if you have same package in different repos you could ended up having multiple versions of react or event multiple versions of zustand. Further, if you want to share logic the best way to do it is by creating plain stores without react, createStore and use useStore whatever you want.

[yuraBrimit]

I agree, but what is no less strange is that this configuration with react and react-dom in react-native app package.json worked stably more than a year, until the moment when I decided to update react-native to a new version.

In any case, we already know the answer to what to do with this specific error.

[sizzlorox]

This occurred in my project where I ran npm update before installing zustand and migrating my project to zustand. Removing my node_modules and package-lock then restinalling has resolved the issue for my small project on my end.

Everything was fun until I decided to utilize the useShallow hook for one of my stores.

I'm currently on:
"zustand": "^5.0.1"
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.23.1"

I am not using react-native. Hope this info provides a bit more insight.