Search code examples
reactjsreduxreact-hooksreact-functional-component

Is it bad to use React Hook and redux together for React functional component?


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?


Solution

  • 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.