tsx - react native lifecycle, loop in useEffect

Question

my console.log is followed by order tts1, tts2, hello this is my result I want it in order Hello this is my result, tts1, tts2. I am new to this this about Lifecycle hook. I tried setState and it was just like a loop, I want it change each time I press button

export default function Todoscr({route, navigation}) {
  try {
    var {item} = route.params;
    console.log(`hahaahhihii:${item}`);
    AsyncStorage.setItem(item, JSON.stringify('abc'), () => {
      console.log(`success`);
    });
  } catch {}
useEffect(() => {
    tts();
  });
  const tts = () => {
    danhsachTTS;
    AsyncStorage.getAllKeys((err, result) => {
      console.log(`Hello this is result:${result}`);
      //@ts-ignore
      danhsachTTS = result;
      return result;
    });
  };
  console.log(`tts1`);
return (
    <SafeAreaView style={styles.containner}>
      {console.log(`tts2`)}
      <FlatList
        data={danhsachTTS}
        // data={DSTTS}
        renderItem={({item}) => Item(item)}
      />
      <Button
        onPress={() => {
          navigation.navigate('AddElement');
        }}
        title="Add items"
      />
    </SafeAreaView>
  );
}

question from:https://stackoverflow.com/questions/65915686/react-native-lifecycle-loop-in-useeffect

Answer 1

I guess there is problem with your usefeect()

1.With no second param,

useEffect(()=>{})

it will call every time when the every component render.

2.With second parameter as []

  useEffect(()=>{},[])

It will call only when the component will mount (first time)

3.Some arguments passed in the Second parameter

 useEffect(()=>{},[arg])

It will call when the arguments value changes.