What is the main difference between using React-Redux Hooks and React-Redux Connect()?

Question

I am about to start a project with React-Redux. For the APIs references there are Hooks and connect(). Since, Hooks are the alternate of connect APIs. What is the difference of using hooks or connect to my React-Redux project.

Answer 1

What is the difference between using hooks and connect to my React-Redux project

There are two major differences:

• Scope
  connect can be used with both React class components and function components whereas hooks can be used with function components only.

• Performance vs simplicity
  Using hooks is simpler. The simplicity comes at a price: you have less performance tweaks at your disposal in comparison with connect. Which is more complex: you call it passing in configuration options (few or many) and get back the 'configured flavor' of connect. This flavor is the HOC that you call passing in your component to get it back wrapped.
  
  One of the main configuration options is the already mentioned mapStateToProps function. You don't have to use it but it most cases you will. There are 4 other functions that exist solely to give you various opportunities to improve the performance of the component you are going to wrap around using connect. The functions are called:
  areStatesEqual
areStatePropsEqual
areOwnPropsEqual
areMergedPropsEqual
  
  All 4 are optional. You can pass in as the connect configuration options either none or some or all of them and tweak the performance. It's worth noting that even if you pass in none, then the default implementations of those functions (which are effectively performance helpers) will apply and as a result, you will get the wrapped component that is more optimised performance-wise than its hooks-using counterpart.

Answer 2

connect is a High Order Component whose job is to provide a way to connect Redux's store to your components. useSelector and useDispatch are the equivalent hooks. Just another technique to do the same thing.

class Component extends React.Component{
    componentDidMount(){
        const { fetchApi, arg } = this.props
        fetchApi(arg)
    }
}
const mapDispatchToProps = dispatch =>({
    fetchApi : arg => dispatch(fetchApi(arg))
})
const mapStateToProps = state =>({
    arg : state.arg
})

export default connect(mapStateToProps, mapDispatchToProps)(Component)

Now the equivalent using hooks

const Component = () =>{
    const dispatch = useDispatch()
    const arg = useSelector(state => state.arg)

    useEffect(() =>{
       dispatch(fetchApi(arg))
    },[dispatch, arg])
}

Both do exactly the same thing, it's only a different approach to connect redux to components internal state. Both consume Redux's context to expose dispatch and state inside a given component