I see that with Redux there's two ways of passing down the state to the components in a React app, one is throw the Provider component and the other one with the connect functionality. However, I wonder why there's two different ways and which one is better in performance than the other.
They are not mutually exclusive. Actually you will almost always need to use Provider, even with connect (See: https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store)
Without connect you would have to manually pass the store to components that need them, with nested components this gets messy, as you need to pass it down multiple levels, even through components that do not need the store if its children need the store.
Provider(component): Attaches app to store.Utilized at applications root and wraps entire application.
Connect (function): Creates container components.