State management

[mvn-luanvu-hn]

Discuss about pros and cons of each library

• Redux
• useReducer and Context
• Recoil
• Mobx
• React Query/SWR for calling API instead of using Redux

[mvn-luanvu-hn]

Here are some usecases where I use Redux

• Calling API: Now we can use React Query/SWR instead
• Store authenticated user, JWT token: I think we can use Context for this usecase
• Complicated feature like drag and drop, undo/redo: In this usecase I think Redux is the best choice

About the cons of Redux

• Code splitting is complicated: https://redux.js.org/usage/code-splitting
• Make components not reusable because if a component is related to a reducer in Redux, we can not use it in other place with the same structure of reducer but data is not similar between component instances
  I encountered this problem in the past when implementing a chat page in React Native
  For example, when a page chat is related to a reducer

export const store = configureStore({
  reducer: {
    chat: chatReducer,
  },
});

In the React Native if we open multiple Chat pages, the data in chat reducer will be overlapped

[jinmayamashita]

@mvn-luanvu-hn
I mostly agree. I think too Redux is certainly the best solution for complex state management (In terms of memoization management) 👍🏼

In the React Native if we open multiple Chat pages, the data in chat reducer will be overlapped

Interesting. Is there a case to manipulate the redux state in multiple chat pages? 🤔

[mvn-luanvu-hn]

@jinmayamashita

In the React Native if we open multiple Chat pages, the data in chat reducer will be overlapped
Interesting. Is there a case to manipulate the redux state in multiple chat pages? 🤔

If the chat page store its messages into the redux's reducer chat, then when user opens multiple chat page, messages will be overlapped
For example
page chat 1: the chat data in Redux has messages: ['message 1', 'message 2']
when open new page chat 2, the chat data in Redux will be overwritten as ['message 3', 'message 4', 'message 5']
So the page chat 1 will display inappropriate messages.

[jinmayamashita]

@mvn-luanvu-hn I kind of get it. In this case, depending on when page chat 1 and page chat 2 are mounted and fetched from the server, the redux's reducer chat state will be overwritten, Am I understanding this correctly?

[mvn-luanvu-hn]

@jinmayamashita

I kind of get it. In this case, depending on when page chat 1 and page chat 2 are mounted and fetched from the server, the redux's reducer chat state will be overwritten, Am I understanding this correctly?

That's right because both page 1, page 2 is related to the redux's reducer chat state.
So I think we can use useReducer instead

[jinmayamashita]

Regarding to React Query

The most most brilliant is that there will be only 1 request sent to the API.

as I mentioned here, React Query can solve state management majority of server-side state and handling it. also,

• If the fresh data is different from the staled one, it will background updates automatically
• support parallel queries, dependent queries
• Manage memory and garbage collection.

Here are some cons:

• They don't manage client side states.
• Maybe we need to set some rules for query keys.

Comparing React Query and SWR

• Both seem to be using React context internally.
  • SWR
  • React Query

React Query and SWR look pretty similar, but there are actually some differences.

• Richer in return values for expressing state than SWR (e.g isFetching, isFetchedAfterMount, isLoading, isLoadingError)
  • SWR
  • React Query
• Less restrictions for caching than SWR (because SWR shallowly compares the arguments for caching)
  • SWR
  • React Query

[yukinoda]

How about RTK Query, it was recommended in the admin panel template mtg. Has anyone used this?
https://redux-toolkit.js.org/rtk-query/overview

[jinmayamashita]

@yukinoda I've never used it before, so I'll give it a try! 🙏🏼

It seems to complement React Query's disadvantages of having to define a query key for the cache.
https://redux-toolkit.js.org/rtk-query/comparison

However, I'm a little concerned about whether Redux will be strongly dependent on it. 🤔