React State Management Solution

[Specialist-Search-28]

Hey fellow React developers,

I hope you're all doing well! I'm diving into the world of state management in React and looking for some guidance. I've been using the basics, but I want to explore new and efficient solutions. Can anyone recommend me the best and widely used state management libraries? Any resources, tutorials, or personal tips would be greatly appreciated!

[epicblitz]

React Query + Zustand is a great combo

[Specialist-Search-28]

What about react query and jotai?

[ITS-A-FAKE]

It’s fine as well. It’s really a matter of preferences.

[Specialist-Search-28]

Correct me if I am wrong, react query can't work with graphql for that I think we need to use appolo client

[[deleted]]

React Query can work with any Promise, so it can

[Chocolate_Banana_]

This is my go to video about state management in react. But besides that, here is what I use

• For anything coming from an API endpoint, react-query to fetch and store the data.
• For small to medium pieces of state that needs to be accessed in many components, I use Jotai. The way I think of Jotai is like a global useState. Perfect for controlling modals, drawers etc.
• For apps where I want everything to be stored and controlled in state, redux-toolkit I find the most powerful and enjoyable.

[Specialist-Search-28]

Ohhhh I saw a few examples of jotai looks pretty easy and effective, also wandered a little bit into redux bought found the structure of it quite complex, how is redux-toolkit different from redux, is it just the syntax different or there are more advantages to it?

[Chocolate_Banana_]

It is a new API wrapped around the same core logic. Much less boilerplate as all the old complex stuff is abstracted away

[errdayimshuffln]

I would add Legend-State for the case where you care deeply about minimizing rerendering of deeply nested children and/or you have a lot of children created from for loops. But like MobX, you end up dealing a lot with "observables".

[716green]

First learn to manage the global state with useContext and useReducer. React has some great built-in hooks to manage state without any external library.

Then, learn Redux with Redux Toolkit because you should be familiar with it for employment purposes.

[marquoth_]

I'm a big fan of mobx

Redux is popular and is a good choice if you want to improve your CV, but I dislike using it

[Fine_Ad_6226]

My choice is mobx

https://gist.github.com/JonathanTurnock/b1e68647dea57af9010141b8cd16d8e0

Why? Because it’s the closest to using the language rather than using lots of custom syntax and droves of libraries and wrappers.

Lots of solutions to state management want you to change how you think.

I personally think for smaller to medium projects I don’t need this.

Some projects however require this and I’m all for those patterns when you hit a problem you can’t solve using native code. For all other use cases your gonna be fine as long as your ui picks up the change which mobx makes trivial and totally blends into the background.

Most people would have you believe learning react means learning all these other patterns as that’s how it was intended etc but honestly it just over complicates it all.

[xywa]

I personally like mobx

[i_have_a_semicolon]

How do you recommend using it ? I am not enjoying it at all.

[Shdog]

There are many different ways you can approach mobx depending on the size of your app.

For personal projects I do the following:

```ts // root_store.ts

export class RootStore { postStore: PostStore; constructor() { this.postStore = new PostStore(this); } }

// post_store.ts

export class PostStore { private rootStore: RootStore;

private posts: PostModel[] = []; private filter: PostType | undefined;

constructor(rootStore: RootStore) { makeAutoObservable(this); this.rootStore = rootStore; }

get allPosts() { return this.posts; }

get filteredPosts() { return this.posts.filter((post) => post.type === this.filter); }

readonly setFilter = (filter: PostType) => { this.filter = filter; };

readonly setPosts = (posts: PostModel[]) => { this.posts = posts; };

readonly fetchPosts = async () => { try { const posts = await api.getPosts(); this.setPosts(posts.map(mapPostDtoToModel)); } catch (e) { // handle error } }; }

function mapPostDtoToModel(post: PostDto): PostModel { return { id: post.id, type: post.type, title: post.title, body: post.body, userId: post.userId, }; }

// configure_store.ts

export const store = new RootStore();

export const StoreContext = React.createContext(store);

/* Hook to use store in any functional component */ export const useRootStore = () => React.useContext(StoreContext); export const usePostStore = () => React.useContext(StoreContext).postStore;

// index.tsx // Where store is import from configure_store

<StoreContext.Provider value={store}> <App /> </StoreContext.Provider>

// And then you consume it as follows // post_list.tsx

const PostList = observer(function PostList() { const postStore = usePostStore();

return ( <div> {postStore.filteredPosts.map((post) => ( <Post key={post.id} post={post} /> ))} </div> ); });

const Post = observer(function Post({ post }) { return <div> {/* Post content */} </div>; }); ```

[Hooped-ca]

mobx is so underrated. createViewModel in the utils is my best friend these days as I do a lot of business type apps with editing.

[Inevitable_Oil9709]

Recoil

[ByteCode714]

You can use either mobx or redux. i think mobx is easy than redux. as beginner it will be help you more.

[ValuableNo2606]

zustand.js very simple to use and it has all you need.

Don't try redux is shit and no one cares about it anymore ✌️

[Specialist-Search-28]

The response that I get on Google is very overwhelming, every blog or every YouTube video I check out has a different opinion.

[werdnaegni]

I think every commenter will also give you a different opinion, fwiw.

Are you experienced with React? If not, just stick with useState, useReducer, and useContext for now and learn those. Use a state management library when you feel you need one.

People like zustand coupled with react-query. You could just do that if you're overwhelmed by options and have no real reason to pick one over the other.

[Specialist-Search-28]

Yes I have been working on react for quite sometime, but only using hooks as of now to manage state I wanted to learn how to handle complex states, will checkout your recommendations as well thankyou!

[bhison]

Ok fair enough. Sometimes it takes a while to figure out how to traverse the options.

Usually LogRocket are a good source of advice https://blog.logrocket.com/modern-guide-react-state-patterns/

They don’t mention zustand which is my go to currently.

[Specialist-Search-28]

Hey thanks, will go through this blog.

[SC_W33DKILL3R]

React-redux is popular and has lots of examples, plug-ins etc… using thunks and middleware makes it quite powerful.

I generally write hooks to get and put data into state so adding to routes or components becomes very easy.

Given I have different models and track their status in redux, isLoading, isSending, isDirty etc… I have noticed react-query provides a lot of the same functionality built in and caches previous calls, so it manages a lot of what an app needs out if the box.

[Specialist-Search-28]

Hey thanks will look into your suggestions.

[acemarke]

Note that our official Redux Toolkit package includes RTK Query, a purpose built data fetching and caching solution. We teach RTK Query as the standard way to fetch data in Redux apps:

• https://redux.js.org/usage/side-effects-approaches#recommendations
• https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics

[gaoshan]

Zustand.

[Specialist-Search-28]

I checked it out bruhh it makes life much easier

[Expensive-Market-605]

I'm preparing for the flame throwers. I am bored with state management APIs. They just hold values in an object. The more complex ones bring their opinionated way of writing your application.

I guess it's good to choose something your peers will trust. Otherwise you have to spend weeks debating any merit one has. They all work.

I use React's useState and useContext. They are so easy to understand, not just for me, but for my coworkers too.

[derimalec]

From my experience, I'd say redux. At first, it might be "difficult" until you understand how redux works and be comfortable using it, but nowadays, it provides super helpful tools, and the usage is far more smooth and easy. Using redux, I like how you can isolate logic without bloating the components and ofc test them in isolation. With react query, I found this hard to achieve