React Native useEffect() re-renders too much

Question

i have a useEffect function where a redux action is called and data is written to prop. My Problem is that useEffect loop many times and flooded the server with requests.

const { loescherData, navigation } = props;

useEffect(() => {
    AsyncStorage.getItem('userdata').then((userdata) => {
        if (userdata) {
            console.log(new Date());
            console.log(userdata);
            var user = JSON.parse(userdata);
            props.fetchLoescherDetails(user.standort);
            setData(props.loescherData);
        }
    });
}, [loescherData]);

if i leave it blank the rendering is finished before receiving data and the content would not updated. is there another way to work with this function?

Answer 1

loescherData won't be available right after calling your redux-action fetchLoescherDetails ... and changing component by setData will cause an infinite rendering cause your current useEffect has a dependency on loescherData

So I'd suggest you exec your redux-action onComponentDidMount by passing an empty-deps [] to your effect... and then consume the output of you action in a different effect

  useEffect(() => {
    AsyncStorage.getItem('userdata').then((userdata) => {
      if (userdata) {
        console.log(new Date());
        console.log(userdata);
        var user = JSON.parse(userdata);
        props.fetchLoescherDetails(user.standort);
        // setData(props.loescherData);
      }
    });
  }, []);

  useEffect(() => {
    if (loescherData) {
      //  do some with loescherData like setState
    }
  }, [loescherData]);