I am working using useContext in React. Today, I recognized that I am using too many useState in useContext. I was looking for the answer, but I could not find it. I know it is a silly question, but please answer my question if possible.

Thank you.

• Thank you for the answers to my question. So, I understand that if there will be many states in useContext, it is a good way to use useRedux.

CodePudding user response：

This is my opinion. I think there is no such thing as too much as long as your states are relevant with what you are doing. It depends on what is your purpose when using the createContext. But make sure to organize them well so that they are still modular and not mixed with other context of states.

For me, I draw a simple borderline where if I'm only making some one-off reusable components that need control from far away (e.g. Dialog which can be toggled by deeply nested button), then I should create a context that has just enough states for that component. Whereas if I want to store some states which I want to access from multiple places, especially if it is related to business logic, then I prefer to use Redux instead.

CodePudding user response：

I think useContext and useState are different functions:

• useContext: This is a hook that returns values from the context that has been kept. Any change in values causes the react component where this hook is placed to rerender.

• useState: a hook that declares the react component's state.

I think I understand what you mean when you say you declare many states in the context. Some best practices you need to consider are:

• Using useReducer hook to group & manage the change of states. It makes it easier to control the changing of states. It is obvious that the state shifts with each individual action.
• You need to review the total state that is declared. Only keep states that need to be shared in that context.

Refer: read more in react js docs about context api & declare a state in react component.