location state vs redux vs context. Which one to use to pass data between components?

user_19828767 0
Viewed 58

First of all, I know this platform is build to solve practical programming problems not to ask for suggestions. But if you can clear doubt and can give your valuable suggestions then that will be a great help.

So, We have multiple options available to pass data from one component to another. For eg, we can pass data as props, we can set data into redux and another component can subscribe to store get updated data, we can set data into location state (not react one) while redirecting user to another screen and user can use useLocation hook to get data from location state.

So the question is about location state basically, Should we use location state method to pass data from one component to another? I know with redux and react way we can do that also but I found this location state method very easy as we don't have to dispatch action, reset state, etc.

Welcoming your suggestions :)

redux reactjs window.location javascript
3 Answers

This really depends on your needs.

Incase of large to huge size application

The state of component is required at multiple places and the changes in state are very often. In such scenarios you can use a state management library like React-Redux, Redux-Toolkit or Flux but remember with the easiness of state management library (redux) comes a dependency of your project so before starting to use any state management library ask question to yourself do I really need it?

Dan Abramov creator of redux himself has an article You might not need redux

In case of small to medium sized projects.

You have to choose between prop drilling ,useContext and useReducer hook If you have many components nested inside one another then a better approach would be using one of the hooks.

So when to use prop drilling?

You can use prop drilling when you don't need a state value in many components.

user_157592280

So the question is about location state basically, Should we use location state method to pass data from one component to another?

I'm assuming we're talking specifically about https://reactrouter.com/en/main/hooks/use-location

I would not use this to pass data from one component to another unless the origin of the data, the source of truth, is in fact the URL (or parts of it, hash segment, query parameters, etc.). This hook (and presumably the context provider behind it) is not meant for that, you'd be misusing it and confuse other developers.

Having ruled out useLocation, there are only react context and other state management libraries (redux etc.) left. Now the question is, should you use a state management library at all, or is react context sufficient?

user_63674240

I hope I understood your question correctly and my answer is helpful for you.

As you said, there are various methods for data transfer in React, but their use is determined depending on the conditions of the application and the type of data. In my opinion, the type of data is very important in this case, for example, if your data is Boolean or string, it is better to define the state and handle it with props, and better than that, it is better to use useLocation(), and sometimes I suggest you to use localStorage. I don't recommend using redux for one-dimensional data such as strings, booleans, etc., because it unnecessarily burdens the program. But if your data is multi-dimensional and large, such as arrays and objects, at the first level, I suggest you to useState() hook and pass the props, at the second level, use useContext() hook, and at the third level, use a data storage such as Redux. I hope I was able to help you

user_124702300
Related