DEV Community

Discussion on: Global state management in React with global variables and hooks. State management doesn't have to be so hard.

Collapse
 
supunkavinda profile image
Supun Kavinda

We use your state-pool in our production system and it works great. We don't have to worry about hard-to-maintain Context API. Thank you very much for the innovative work. Also, I wonder why React doesn't support this approach by default.

Also, I've created a minified version (200 bytes gziped) of state-pool for Preact (github.com/SupunKavinda/preact-glo...), with one hook, useGlobalState.

Btw, I saw that you are using immer as an dependency. Is it for the reducer?

Collapse
 
yezyilomo profile image
Yezy Ilomo

Immer is used for object comparisons to make sure that even a small change in object property triggers re-render to all components subscribed to a related global state.

Collapse
 
shang profile image
Shang

Hi @supunkavinda
I installed your package and tried to use it. But I keep getting this error.

TypeError: Cannot read properties of undefined (reading 'H')
at d (localhost:9000/
runFrame/bundle.js:45827:419)
at s (localhost:9000/__runFrame/bundle.j...)
at h (localhost:9000/__runFrame/bundle.j...)
at useGlobalState (localhost:9000/__runFrame/bundle.j...)
at CareerStoryApp (localhost:9000/__runFrame/bundle.j...)
at renderWithHooks (localhost:9000/__runFrame/bundle.j...)
at mountIndeterminateComponent (localhost:9000/__runFrame/bundle.j...)
at beginWork (localhost:9000/__runFrame/bundle.j...)
at HTMLUnknownElement.callCallback (localhost:9000/__runFrame/bundle.j...)
at Object.invokeGuardedCallbackDev (localhost:9000/__runFrame/bundle.j...)
at invokeGuardedCallback (localhost:9000/__runFrame/bundle.j...)
at beginWork$1 (localhost:9000/__runFrame/bundle.j...)
at performUnitOfWork (localhost:9000/__runFrame/bundle.j...)
at workLoopSync (localhost:9000/__runFrame/bundle.j...)
at performSyncWorkOnRoot (localhost:9000/__runFrame/bundle.j...)
at scheduleUpdateOnFiber (localhost:9000/__runFrame/bundle.j...)
at updateContainer (localhost:9000/__runFrame/bundle.j...)
at localhost:9000/__runFrame/bundle.j...
at unbatchedUpdates (localhost:9000/__runFrame/bundle.j...)
at legacyRenderSubtreeIntoContainer (localhost:9000/__runFrame/bundle.j...)
at Object.render (localhost:9000/__runFrame/bundle.j...)
at initializeBlock (localhost:9000/__runFrame/bundle.j...)
at ./frontend/index.js (localhost:9000/__runFrame/bundle.j...)
at webpack_require (localhost:9000/__runFrame/bundle.j...)
at runBlock (localhost:9000/__runFrame/bundle.j...)
at static.airtable.com/js/by_sha/a663...

Collapse
 
supunkavinda profile image
Supun Kavinda

Hey, I am no longer maintaining the package. Also, from my experience, global state using window variables can run into many pitfalls. Use nanostores if possible.

Thread Thread
 
shang profile image
Shang

Hi, thanks for your fast reply.
Okay, I will consider using nanostores.
But when you use state-pool package, did you run without any errors?
I get keeping this error.

"TypeError: Cannot read properties of undefined (reading 'setState')"

This error indicates store.setState("count", 0);

Can you please guide me?
Thank you!

Thread Thread
 
supunkavinda profile image
Supun Kavinda

Sorry, I haven't used it in a long while

Thread Thread
 
shang profile image
Shang

Okay anyway.
Thanks!