title: react-redux connect with Formik - Maximum call stack size exceeded
body: <p>I get an infinite loop when i try to connect my form component to redux.
  Would be funny if it wasn't frustrating because the code worked earlier today and now it doesn't after i reverted 1 commit. </p>
  
  <p>Code was the same pretty much the same and connect()() worked and i had signUserUp function available as prop to work with. I removed node_modules and package-lock just in case and install all again and it's the same.</p>
  
  <p><strong>Signup.js</strong></p>
  
  <pre><code>import { connect } from "react-redux";
  import signupActions from "../modules/signup";
  
  function Signup() {
    return &lt;BasicForm /&gt;
  }
  
  const BasicForm = () =&gt; (
    &lt;Formik
      initialValues={{ email: "", password: "", confirmPassword: "" }}
      validationSchema={signupSchema}
      onSubmit={(values, actions) =&gt; {
        console.log("form data: ", values);
      }}
      render={({ values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit }) =&gt; (
        &lt;Container&gt;
          &lt;Form onSubmit={handleSubmit}&gt;
            &lt;Form.Input
              type="text"
              placeholder="Email"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
              name="email"
            /&gt;
            {errors.email &amp;&amp; touched.email &amp;&amp; &lt;div&gt;{errors.email}&lt;/div&gt;}
  
            &lt;Form.Input
              type="password"
              placeholder="Password"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.password}
              name="password"
            /&gt;
            {errors.password &amp;&amp; touched.password &amp;&amp; &lt;div&gt;{errors.password}&lt;/div&gt;}
  
            &lt;Form.Input
              type="password"
              placeholder="Confirm Password"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.confirmPassword}
              name="confirmPassword"
            /&gt;
            {errors.confirmPassword &amp;&amp; touched.confirmPassword &amp;&amp; &lt;div&gt;{errors.confirmPassword}&lt;/div&gt;}
  
            &lt;Button primary type="submit" onSubmit={handleSubmit} disabled={isSubmitting}&gt;
              Submit
            &lt;/Button&gt;
          &lt;/Form&gt;
        &lt;/Container&gt;
      )}
    /&gt;
  );
  
  export default connect(
    null,
    signupActions
  )(Signup);
  </code></pre>
  
  <p>i get the error here obviously when i add connect...</p>
  
  <p>This is the single file module with redux stuff
  <strong>signup.js</strong></p>
  
  <pre><code>import api from '../utils/api';
  
  const SIGN_UP = 'signup/SIGN_UP';
  
  const initialState = {
    isAuthenticated: false,
    jwt: '',
    authError: '',
    formErrors: [],
  };
  
  export default (state = initialState, action = {}) =&gt; {
    switch (action.type) {
      case SIGN_UP:
        return { ...state, isAuthenticated: true, jwt: action.payload, authError: '', formErrors: [] };
      default:
        return state;
    }
  };
  
  export const signup = token =&gt; ({
    type: SIGN_UP,
    payload: token,
  });
  
  export const signUserUp = credentials =&gt; {
    return dispatch =&gt; api.post('auth/signup', credentials).then(token =&gt; dispatch(signup(token)));
  };
  </code></pre>
  
  <p>In <strong>rootReducer.js</strong> i import that signupReducer like this</p>
  
  <pre><code>import signupReducer from './modules/signup';
  
  export default combineReducers({
    signup: signupReducer,
  });
  </code></pre>
  
  <p>here is the <a href="https://codesandbox.io/s/mqr4yrymvx" rel="nofollow noreferrer">codesandbox</a> example to see the errors at least when i try to visit sign up page.</p>