React Native many re-renders error for 3 state

Solution 1:

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.