title: Which is preferred way to use connect() from react-redux, Parent vs Child component?
body: <p>I am little confuse in the efficient way to use <code>connect()</code> from <strong>react-redux</strong> library. I have the blow component</p>
  
  <pre><code>class SignUp extends React.Component {
  //some functions
  render(){
    return (
        &lt;SignUpPageWrapper&gt;
          &lt;SignUpPage&gt;
            &lt;SignUpPageLeft&gt;
              &lt;SignUpLeftText /&gt; //component
            &lt;/SignUpPageLeft&gt;
            &lt;SignUpPageRight&gt;
              &lt;SignUpForm /&gt; //component &lt;=
            &lt;/SignUpPageRight&gt;
          &lt;/SignUpPage&gt;
          &lt;SignUpFooter /&gt; //component
        &lt;/SignUpPageWrapper&gt;
    );
   }
  }
  </code></pre>
  
  <p>In above code, few are react <code>Component</code>(//commented) and rest are <code>const</code> from <strong>styled-component</strong> library.</p>
  
  <p>As of now, I have made <code>SignUpForm</code> as a container, i.e wrapped into <code>connect()</code></p>
  
  <pre><code>class SignUpForm extends React.Component {
    //lots of code here using this.props from connect()
  
  }    
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(SignUpForm);
  </code></pre>
  
  <p>But I feel that this is not the efficient way to use <code>connect</code>, the better would be to wrap the parent component <code>SignUp</code> into <code>connect</code> like below, and then passing the <code>methods</code> and <code>states</code> as <code>props</code> to the child components.</p>
  
  <pre><code>class SignUp extends React.Component {
      //some functions
      render(){
        return (
            //other components       
            &lt;SignUpPageRight&gt;
              &lt;SignUpForm signupFunc={this.props.signupFunc} /&gt;
            &lt;/SignUpPageRight&gt;
          &lt;/SignUpPage&gt;
          &lt;SignUpFooter /&gt; //component
        &lt;/SignUpPageWrapper&gt;
    );
   }
  }
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(SignUp);
  </code></pre>
  
  <p>What would be the clean, efficient and good way to write this code?</p>