4

I'm using react hook for the local variables such as const [something, setSomthing] = useState('') and redux for storing the variables passed through whole component using store and Provider.

But I was told I shouldn't use React Hooks and Redux together. Can someone explain why and if I shouldn't, where how should I store local variables within functional component?

taehoon719
  • 151
  • 2
  • 11
  • 1
    Storing state inside a functional component is fine as long as it's related to that component, for example to handle form data. But when you want that state to propagate to multiple components you should use redux, since redux handles the global state. – Pierre Dec 18 '19 at 09:24

4 Answers4

5

Redux and local state have always been used together. Hooks are used to reproduce the local state that you could store in class based components, but using functional components instead. Like you said in your question, state hooks are used to keep a local state for the component, whilst redux is used to keep a global state of your app. They are not incompatible with each other. Let's say you have a component that keeps a counter, but that counter is used only locally by that component. For that case you would use hooks to keep the state of the counter. Now let's say the requirements for your app change, and now that counter (that specific counter, with the same values, not a different one) needs to be used by other components across your application. In that case that counter would have to be moved to the redux global state. I hope that answers your question.

David G.
  • 1,255
  • 9
  • 16
0

If the state is not needed globally it is fine to store it locally in the function using the setState hook and without Redux.

It is also fine to use Redux in functional components for global state if it is required. However for many use cases you can use the Context API with hooks which is provided by React.

Charlie
  • 160
  • 1
  • 8
0

Think of it in terms of where should this piece of state be managed.

Say you have a checkbox, why would the whole world need to know that the checkbox is i.e. checked? That may be considered a piece of state that is only needed by the checkbox component, so hold its state in the component with a setChecked. Unless other components use that checked value... in which case you may want to move the checked status up to a point where that value can waterfall down to only the components that needed the checked value.

You can save the value of checked to redux, but do you need to? We find (in our apps) that redux is better than react context as it re-renders less, we also get state for checkboxes / etc from get requests at init of our app so we save to redux at build time, then populate checkboxes when they are shown on the page... so redux is the right place (for us) to hold state (not the component as i previously mentioned). So it depends on use case.

The general rule is to hold state no higher in the tree than it is needed.

Jeremy
  • 1,170
  • 9
  • 26
-1

There is no need to worry about your redux and react-hooks because their use-case exactly depended on your data and if you don't want to see the loaded data after navigation into pages, so I suggest you keep your code without any data store manager such as Mobx or Redux but if you wanna storing data on somewhere and share them between your pages so you need to implement one of data managers into your project. but totally there is no conflict in React hooks with redux.

But if you are comfortable with React hooks, it can help you to store data like Redux via React context API.

A Demo of using React context API in Typescript:

https://github.com/ali-master/react-typescript-hooks-sample
Ali Torki
  • 1,929
  • 16
  • 26