DEV Community

You Can Definitely Use Global Variables To Manage Global State In React

Yezy Ilomo on July 07, 2021

Introduction React provides a very good and simple way to manage local states through state hooks but when it comes to global states the...

Read full post

po-cheng • Jul 12 '21

Let me start off by saying state-pool looks amazing.

Since we began writing applications in React, we've always thought managing global state is such a chore. Concepts in things like Redux are quite convoluted (in my opinion) and is an absolute nightmare for our juniors. Evening after understanding the concepts, there is just so much boilerplate overhead you need to add to your code to make everything work smoothly. This should make state management simple again.

However I do have one question for you. Have you considered changing to Typescript? Or perhaps having some typings either included in the library or through @types? All of the production code in our company are written in Typescript and the development experience when we use a library without typings is quite horrible. I am slightly apprehensive about using this in our production code due to this reason.

Yezy Ilomo • Jul 12 '21

Am glad you found it simpler, I’ve actually used Redux and other state management libraries before and what you’re saying about complexity is very true, I think most of them are over engineered which makes it very hard for beginners to learn, Part of the reason I developed this lib was to make things easier that’s why I’ve tried my best(still do) to keep the API very minimal and very similar to builtin react state hook’s API.

Lots of people have requested TS support so we are definitely going to work on it, if things go well we might have it supported on the next release so hang in there.

Dylan Rosario • Oct 30 '21

Agree, redux is BLOATED.
The issue is my component need access from a non-local iFrame, and even maybe the browser JS runtime, above the Shadow Dom barrier. This would help me drop the legacy React and move to true ISOMORPHIC components.
Please contact me for some commissioned work surrounding tis package please.

Regards,
Dylan Rosario
dylan@rowzzy.com

po-cheng • Jul 12 '21

That's great news. Thank you for your amazing work!

Supun Kavinda • Jul 8 '21 • Edited

We use your state-pool in our production application (quite a large one) and it's working great. Thank you for the work!

However, we have written an extended version of useGlobalState like this.

export default function useGlobalStateExtended(key, def) {
    const [x, update, set] = useGlobalState(key, {
        default: def
    });
    return [x, set];
}

It allows us to easily define a default in the param, without adding it inside an object. And, returns only the value and set function (we are not interested in the update function). Btw, looks like you have made a change to the return value. The version we use returns [value, update, set] but in your example here it's changed to [value, set, update]. It's good move.

This is a great library to solve a lot of headaches in React applications.

Yezy Ilomo • Jul 8 '21

Glad to know that you are using state-pool in production. The change was made in v0.4.0, I think [state, setState, updateState] makes more sense than [state, updateState, setState], it was also influenced by [state, setState] from useState since we don't want state-pool's API to be very different from react state hook's API.

Arthur Pacaud • Jul 9 '21

Ah that is funny, it kind of reminds me of a little project i have made not long ago: github.com/arthuro555/create-proje...
Though mine is not production ready and really focused on a specific use case 😅. I'll look into using this for more general purpose global state management.

Dylan Rosario • Oct 30 '21

Yezileli Ilomo,

Can you contact me , Hello I am Dylan Rosario i work in San Francisco.

I have a PAID commision for you, and this component seems promising for a specific task i need. Although out of the box lacks some specific features I would like to see, and rather than doing the work here int he USA with local devs i figured. could give you and the TEAM at NEUROTECH a chance to show me what you got.

I would like you to create a CUSTOM hook WEB COMPONENT from this state-pool LIB for me.

Specifically, i need to be able to access deep REACT-COMPONENTS state objects (inside the SHADOW DOM) directly from the browsers JS console. It should enforce to Reactive PUB/SUB standards that will trip the subscribers state listener to update the state value , thus a change handler event , resulting in propagation both Client side and via SSR interfaces.

This means i can force hydration and push state changes from the JS console at the browser level programmatically, with no mouse keyboard user input, . Which will fire off exactly as if a browser were triggered by interaction.

The component should probably provide a selector array of Objects and the respective states bound to the Objects.
Most specifically, i need to update FORM INPUT Boxes,

And YES this is a paid $$$ commision of this LIB for commercial use. FYI.... it will be distributed in a free custom ISOMORPHIC Library that i am releasing. I offer high level services, and I have other GLOBAL state solutions available to me..... but i figured that since your a young man from a location not too unsimilar to where my CEO Arvind Patel, ( he comes from Zanzibar) , So i figured i would give you a chance to makes some cash and possibly set up future dev work contracts.

Thanks In Advance. TIA,

Regards,
Dylan Rosario
dylan@rowzzy.com

Mwandi • Jul 8 '21

This is incredible 👏

Yezy Ilomo • Jul 8 '21

Thank you.

calag4n • Jul 11 '21

Nice, I'll definitely use it !
Repo stared 👌.

Itay Schechner • Jul 8 '21

Brilliant! I will sure use it in a future project someday.

Yezy Ilomo • Jul 8 '21

Thank you!, would love to hear your feedback when you do so.

Mike Talbot ⭐ • Jul 8 '21

I use something very similar in my projects and it's super helpful. In respect to this article - really nice docs and I love your interface.

Yezy Ilomo • Jul 8 '21

Thank you..

CK • Jul 8 '21

I will certainly give this a look on my next React project. Nice work!

Yezy Ilomo • Jul 8 '21

Thank you..

Shang • May 4 '23 • Edited

Hi Yezy.
When I try to use your package, 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!

MatanyaP • Dec 17 '21

Hey, looks great indeed, kudos!
Can I use a global state set from one file in another? Because if it's possible it solves all my problems with state management :)

Yezy Ilomo • Dec 18 '21

Yes you can use global state anywhere as long as it’s in react component.

Thomas Ghysels • Jul 11 '21

Consider a comparison with zustand, which does exactly the same.
This approach does not work well with SSR and I would actually not recommend it.

Yezy Ilomo • Jul 12 '21

It actually works really well with SSR, I’ve used it several times with Nextjs, Stay tuned my next post will be about SSR with state-pool.

Arash Shakery • Jul 12 '21

An what about SSR? This methodoly promotes so many bad patterns, developing non-reusable components being one of them.

Yezy Ilomo • Jul 12 '21

dev.to/yezyilomo/comment/1g7na, Would you mention them please?, non-reusable components how?.