How to solve infinite loop in JSX?

Im trying to map my userForm state to render each by each , but the map function sometimes returns me as undefiend and sometimes as an react infinite loop and I’m not finding a way to solve it, somene could help me ?

my code:

const FormScreen = async({route}) => { 
  const [userForm, setuserForm] = useState([]);

  if (userForm.length > 0) {
    console.log(userForm,'campos:',userForm.fields);
    return;
  } else {
    setuserForm(await JSON.parse(route.params.paramKey));
  }
         {...}

return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.textStyle}>
          COLLECTION :
        </Text>

      {userForm.map((item) => (             
      <Text keys={item.fields}>test</Text>        
      ))} 
       
      </View>

    </SafeAreaView>
  );
 };

>Solution :

Move setuserForm(await JSON.parse(route.params.paramKey)); into a useEffect hook.

https://reactjs.org/docs/hooks-effect.html