Is using Redux Hooks instead of connect() good design?

Question

Currently there are two concepts how to connect a React component to the redux store: connect() and Redux Hooks. I was wondering whether using hooks is considered good software design.

• It harms the Single Responsibility Principle because the Component is not only responsible for rendering the data, but also for connecting to the store.
• There is a tight coupling between the Component and Redux. It will be difficult to reuse the component or to switch from Redux to another state management solution.

Are there any advantages of hooks over connect() regarding software quality?

Answer 1

Both connect and useSelector/useDispatch are valid ways to interact with the Redux store from your React components. However, they have different tradeoffs. I talked about these tradeoffs in my post Thoughts on React Hooks, Redux, and Separation of Concerns, and my ReactBoston 2019 talk on Hooks, HOCs, and Tradeoffs.

Summarizing: yes, hooks in general lead towards components that do more internally, vs separate components that do different things. Both approaches are valid - it's a question of you specifically want to architect your system.

In terms of "advantages": React-Redux's hooks require writing less total code than connect does, don't add indirection, and are easier to use with TypeScript.