# Replace Redux with React Hooks, the easy way.

A small alternative easy and fast to setup that needs no library.

Photo by [Omer Rana](https://unsplash.com/@omerrana?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

Do you ever wonder if you can really replace Redux with React Hooks when it comes to the global state management of your applications, even the most complex?

It happens to me all the time I need to store some data so I decided not to wait a super-definitive opinion from the community but try firsthand.

> What the hell, I should try anyway if it fits the way I work!

I love using GraphQL but, when I develop a complex application, I still need some kind of global store, so I started searching for articles about how to replace redux store with the `useContext` React hook. I found a few, [this one is very inspiring](https://www.sitepoint.com/replace-redux-react-hooks-context-api/) but I want it to be even cleaner.

The solution I want has to be:

🎣 using React hooks;

🚫 without `switch` statements;

😌 damn simple and clean;

🚀 damn fast to use;

♻️ reusable.

### TLDR; This is what I got:

<iframe src="https://codesandbox.io/embed/replace-redux-with-react-hooks-the-easyway-nqg9i" width="1192" height="596"></iframe>

### Woah Slow Down

#### Step 0

When I create the Store with *Store.js* i need the `initialState` and the `reducers,` the latter has to be defined as a single object where every single property is a reducer function:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754235061338/4e186520-19b2-4f8a-b9ce-d662480c71bc.png align="left")

Then `createStoreProvider` high order function returns another function that has, as only parameter, the inner component for the Store provider so that you can nest in that point the components that will have access to the global state.

#### Step 1

The body of the second function sets up a way to retrieve and use the right reducer function from the initial reducers object and uses it with the `useReducer` [React hook](https://reactjs.org/docs/hooks-reference.html#usereducer) so that every action will change the global state in its own way:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754235062531/d0f3f77b-b130-4200-87c5-e4ce90df5bd9.png align="left")

#### Step 2

The store [context](https://reactjs.org/docs/hooks-reference.html#usecontext) that we will use as global state will now be used as [context provider](https://reactjs.org/docs/context.html#contextprovider); it will provides an object with 2 properties: the global state itself and a function that we will use to change the state:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754235063353/cbcb8028-30f0-4f5f-87ec-557247cf573c.png align="left")

The complete Store.js

*And that’s it.* [*Github gist*](https://gist.github.com/AlessandroAnnini/c29b38a1c22eaebd5b5578828288dd6c)*.*

#### Step 3 (use it!)

When we want to use the state in a component we only need to import the created Store and read the needed property with the help of the `useContext` React hook:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754235064300/3bd3fed4-1f06-42a6-881c-624dfdfb38e7.png align="left")

Destructuring the store context we can access to both the current state and the `dispatch` function that can be used to send changes to our store selecting

* *what* to change thanks to the action *type* property and
    
* *how* to change state thanks to the *payload* property
    

just like we used to do in redux.

<iframe src="https://giphy.com/embed/zcCGBRQshGdt6/twitter/iframe" width="435" height="279"></iframe>

### ⚠️ Downsides

When creating React context as global store you have to be aware that every time you update a value in the store, this will re-render every component that uses it, and this could create a huge performance problem!

#### Solutions

* This one is the cleaner: use multiple contexts so when you update one only the components that are actually using values from that store will re-render
    
* Use `useMemo` React hook, this way, you can specify, for every component using the global store, on which property change it will react.  
    I updated the previous example for this solution:
    

<iframe src="https://codesandbox.io/embed/replace-redux-with-react-hooks-fix-usememo-9h4zw" width="1192" height="596"></iframe>

### Conclusions

I like the way it all blends in my code, it’s easy to manage, it does not need updates until I say so. It’s easy enough to rewrite if you are offline camping alone in a forest.

[Redux principles](https://redux.js.org/introduction/three-principles) are still valid with this setup:

✅ Single source of truth

✅ State is read-only

✅ Changes are made with pure functions

It is true that Redux has more plugins and tools but at the end of the day I think that having a simple code in the first place is the best way to start off a new project and understand what happens when it runs.

If you want a readymade, working solution for a global store using React hooks you can take a look to the following projects:

[**jhonnymichel/react-hookstore**  
\*A very simple and small (1k gzipped!) state management lib for React that uses the bleeding edge React's useState hook…\*github.com](https://github.com/jhonnymichel/react-hookstore)

[**forsigner/stamen**  
\*A React state management library Based on Hooks Check on CodeSandbox: Basic | Async Stamen is simple, only two step to…\*github.com](https://github.com/forsigner/stamen)

[**ice-lab/icestore**  
*snail: Lightweight state management solution based on React Hooks. - ice-lab/icestore*github.com](https://github.com/ice-lab/icestore)

**🙏 Thanks to Full-Staks Magazine for helping me out with downsides!**

[**Full-Stacks Magazine**  
*Articles, Challenges, News, Memes, Quotes and UI/UX for web developers. Contact us: @S\_Kill*t.me](https://t.me/full_stacks)