Which is preferred way to use connect() from react-redux, Parent vs Child component?

Question

I am little confuse in the efficient way to use connect() from react-redux library. I have the blow component

class SignUp extends React.Component {
//some functions
render(){
  return (
      <SignUpPageWrapper>
        <SignUpPage>
          <SignUpPageLeft>
            <SignUpLeftText /> //component
          </SignUpPageLeft>
          <SignUpPageRight>
            <SignUpForm /> //component <=
          </SignUpPageRight>
        </SignUpPage>
        <SignUpFooter /> //component
      </SignUpPageWrapper>
  );
 }
}

In above code, few are react Component(//commented) and rest are const from styled-component library.

As of now, I have made SignUpForm as a container, i.e wrapped into connect()

class SignUpForm extends React.Component {
  //lots of code here using this.props from connect()

}    
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignUpForm);

But I feel that this is not the efficient way to use connect, the better would be to wrap the parent component SignUp into connect like below, and then passing the methods and states as props to the child components.

class SignUp extends React.Component {
    //some functions
    render(){
      return (
          //other components       
          <SignUpPageRight>
            <SignUpForm signupFunc={this.props.signupFunc} />
          </SignUpPageRight>
        </SignUpPage>
        <SignUpFooter /> //component
      </SignUpPageWrapper>
  );
 }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignUp);

What would be the clean, efficient and good way to write this code?

Answer 1

If we go by documentation, there is actually a right or wrong answer to this. Redux documentation suggests separating components into presentational and container components.

React bindings for Redux separate presentational components from container components. This approach can make your app easier to understand and allow you to more easily reuse components. Redux Documentation

Your SignUpForm component is a perfect example of a container component that has the job of communicating with the redux store. Values, and dispatch handlers should be passed down through props to your presentational components. This makes your store manipulation very easy to understand because it is all contained within one component.

Now for reusability. Your container component should be higher-ordered enough so that it can contain all the presentational components that will manipulate a logical slice of your redux store, but low enough that you can reuse as much as possible. So for a form, the container should contain all the inputs, and you can separate the inputs themselves into as many presentational components as you like. This also allows you to reuse your presentational components with a different continainer component as long as you structure them with modularity in mind.