# Too many re-renders Formik and Yup

**URL:** https://forum.codewithmosh.com/t/too-many-re-renders-formik-and-yup/5632
**Category:** React Native
**Created:** [June 20, 2021, 7:55pm UTC](https://forum.codewithmosh.com/t/too-many-re-renders-formik-and-yup/5632 "2021-06-20T19:55:51Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![bebo7](https://avatars.discourse-cdn.com/v4/letter/b/fbc32d/32.png) [@bebo7](https://forum.codewithmosh.com/u/bebo7)
#### Post date: [June 20, 2021, 7:55pm UTC](https://forum.codewithmosh.com/t/too-many-re-renders-formik-and-yup/5632/1 "2021-06-20T19:55:51Z")

</div>

I am on video 3 and 4 of forms for the react native course and i get an error saying  
“Too many re-renders. React limits the number of renders to prevent an infinite loop.”

This is my code for the Login Screen that I worked on

```auto
import React from 'react';
import {
  StyleSheet,
  Image,
} from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';

import AppButton from '../components/AppButton';
import AppText from '../components/AppText';
import AppTextInput from '../components/AppTextInput';
import Screen from '../components/Screen';

const validationSchema = Yup.object().shape({
    email: Yup.string().required().email().label('Email'),
    password: Yup.string().required().min(4).label('Password'),
  });

function LoginScreen() {
  return (
    <Screen style={ styles.container }>
      <Image
        source={ require('../assets/logo-red.png') }
        style={ styles.logo }
      />
      <Formik
        initialValues={{ email: '', password: '' }}
        onSubmit={ values => console.log(values) }
        validationSchema={ validationSchema }
      >
        {({ handleChange, handleSubmit, errors }) => (
          <>
            <AppTextInput
              autoCapitalize='none'
              autoCorrect={ false }
              icon='email'
              keyboardType='email-address'
              onChange={ handleChange('email') }
              placeholder='Email'
              textContentType='emailAdress'
            />
            <AppText style={{ color: 'red' }}>{ errors.email }</AppText>
            <AppTextInput
              autoCapitalize='none'
              autoCorrect={ false }
              icon='lock'
              onChange={ handleChange('password') }
              placeholder='Password'
              secureTextEntry
              textContentType='password'
            />
            <AppText style={{ color: 'red' }}>{ errors.password }</AppText>
            <AppButton title='Login' onPress={ handleSubmit() } />
          </>
        )}
      </Formik>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  logo: {
    width: 80,
    height: 80,
    alignSelf: 'center',
    marginTop: 50,
    marginBottom: 50,
  },
});

export default LoginScreen;

```

---

<div class="post-metadata">

### Author: ![lap\_666](https://avatars.discourse-cdn.com/v4/letter/l/b9bd4f/32.png) [@lap\_666](https://forum.codewithmosh.com/u/lap_666)
#### Post date: [October 27, 2021, 9:10pm UTC](https://forum.codewithmosh.com/t/too-many-re-renders-formik-and-yup/5632/2 "2021-10-27T21:10:29Z")

</div>

\<AppButton title=‘Login’ onPress={ handleSubmit() } /\>  
**change to**  
\<AppButton title=‘Login’ onPress={ handleSubmit } /\>