Too many re-renders. in React Native

Question

I am making a custom TextInput component and in which i apply some different styles on the basis of state hook, which will be called onFocus and onBlur events, I've seen couple of solution on internet some of them are listed here Solution and i tried some of them but none of them work for me.

NOTE: I am using Expo.

Screen.js

import InputField from '../Components/InputField'

const Screen = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    return(
         <InputField 
              placeholder='user@example.com' 
              label='E-mail' 
              value={email} 
              setValue={setEmail()} 
              isSecure={false}
              defState={false}/>
    )

}

InputField.js

const InputField = ({placeholder, label, value, setValue, isSecure, defState}) => {

    const [isFocused, setFocus] = useState(!!defState)
    const [isBlur, setBlur] = useState(!!defState)

    const handle_focus = () => {
        console.log('focused')
        setFocus(true)
        setBlur(false)
    } 

    const handle_blur = () => {
        console.log('blur')
        setBlur(true)
        setFocus(false)
    }

    return (
        <View style={isBlur ? styles.container : styles.focusContainer}>
            {isFocused ? <Text style={styles.label}>{label}</Text>: null}
            <View style={styles.inputCont}>
                <TextInput 
                    placeholder={placeholder}
                    secureTextEntry={isSecure}
                    value={value}
                    onChangeText={setValue}
                    onFocus={()=>handle_focus}
                    onBlur={()=>handle_blur}
                />
                <Icon name='checkmark-sharp' size={20} color={COLORS.blue} style={{marginLeft: 'auto'}}/>
            </View>
        </View>
    );
}

Error:

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Kartikey · Accepted Answer · 2021-05-14T05:19:36.163

1

In your InputField change this

onFocus={()=>handle_focus}
onBlur={()=>handle_blur}

To this

onFocus={() => handle_focus()}
onBlur={() => handle_blur()}

And also, in your Screen change this

setValue={setEmail()}

to This

setValue={(text) => setEmail(text)}

edited May 14 '21 at 05:19

answered May 14 '21 at 05:15

Kartikey

4,516
4
15
40

No it didn't worked, still i got the same error. – Rudra soni May 14 '21 at 05:18
It worked but, there is a warning "[Unhandled promise rejection: Error: Directory for /data/data/host.exp.exponent/cache/ExperienceData/%40rudrasoni%2FGaman/ExponentAsset-b3263095df30cb7db78c613e73f9499a.ttf doesn't exist." – Rudra soni May 14 '21 at 05:29
Clear your `expo Go` cache, restart the server then again run in your Expo go App – Kartikey May 14 '21 at 05:38
Also I think you have not loaded your fonts correctly.. check [this](https://stackoverflow.com/questions/67141441/error-while-loading-custom-fonts-in-expo-project) out. And make sure to load it this way..It is the simplest and most clear way of loading fonts...Also Check the working example that I gave in the answer – Kartikey May 14 '21 at 05:41
yes brother, I've done exactly how you described and it works perfectly fine. Thank you again. – Rudra soni May 14 '21 at 11:40
@Rudrasoni Happy to Help! If this answer solved your issue, please mark it as accepted. – Kartikey May 14 '21 at 12:14

Too many re-renders. in React Native

1 Answers1