React Native many re-renders error for 3 state

user_14177537 0
Viewed 33

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. My goal is to keep citydata fresh as countries are updated. I get this error how fix it in this code?

  const [selectedCity, setSelectedCity] = useState({})
  const [selectedCountry, setSelectedCountry] = useState({})
  const [cityData,setCityData]= useState(TurkeyCityData)
  
  function onChangeCity() {
    return (val) => setSelectedCity(val)
  }
  function onChangeCountry() {
    setCityData(`${selectedCountry.item}${'CityData'}`)
    return (val)=>setSelectedCountry(val);
  }
  //`${selectedCountry.item}${'CityData'}`

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <SelectBox
          label=''
          options={countryData}
          value={selectedCountry}
          onChange={onChangeCountry()}
          hideInputFilter={false}
          width={width/2.5}
          containerStyle={styles.selectbox}
          arrowIconColor='#5359d1'
          searchIconColor='#5359d1'
          inputPlaceholder='Ülke Seç'
        />

react-native state javascript
1 Answers

In the linked example you shared, the handler code is:

function onChange() {
  return (val) => setSelectedTeam(val)
}

This returns a state-setting function that is used as the change handler with onChange={onChange()}.

In your code, you return a handler as they do, but you also set state immediately:

function onChangeCountry() {
  setCityData(`${selectedCountry.item}${'CityData'}`) // <-- triggers rerender
  return (val)=>setSelectedCountry(val);
}

There has to be some condition or trigger mechanism for any state sets or you'll get an infinite rerendering loop. You can use an effect or put the setter inside the handler callback, whichever makes more sense for your application logic:

function onChangeCountry() {
  return val => {
    setSelectedCountry(val);
    setCityData(`${selectedCountry.item}${'CityData'}`);
  };
}

As an aside, I'm not sure if the extra layer of abstraction makes much sense here; I'd just use one function which is less confusing:

function onChangeCountry(val) {
  setSelectedCountry(val);
  setCityData(`${selectedCountry.item}${'CityData'}`);
}

and use it with:

onChange={onChangeCountry}

Or, rename the function makeOnChangeCountryHandler() so it's clear that the function isn't the handler itself; rather, it returns/creates/makes the handler upon invocation.

user_62433520
Related