Running into an infinite loop when using useEffect() in react-native

Question

I have recently begun using react native and I'm building this mobile application using Expo. I am using useEffect() to be able to call a function inside it. All I want is to wait for the reponse of the API to finish completely before I display the result (which in this case is the connectionName variable). I gave the useEffect() function walletsas a second parameter because I want the API fetched again whenever wallets changes, but I seem to be running in an infinite loop even though wallets hasn't changed. Any help is much appreciated.

export default function LinksScreen() {

       const [wallets, setWallets] = React.useState([]);
       const [count, setCount] = React.useState(0);
       const [connectionName, setConnectionName] = React.useState("loading...");

       React.useEffect(() => {
          (async () => {
             fetchConnections();
          })();
       }, [wallets]);

       async function fetchConnections() {

          const res = await fetch('https://api.streetcred.id/custodian/v1/api/' + walletID + '/connections', {
             method: 'GET',
             headers: {
                Accept: 'application/json',
             },
          });
          res.json().then(res => setWallets(res)).then(setConnectionName(wallets[0].name))
       }

       return (
          <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
             <OptionButton
                icon="md-school"
                label={connectionName}
                onPress={() => WebBrowser.openBrowserAsync('https://docs.expo.io')}
             />
          </ScrollView>
       );
    }

The useEffect hook will re-run every time a dependency in the array of dependencies changes. If the function in your hook changes the dependencies, it will loop forever. — Jared Smith
– Jared Smith, Commented Mar 23, 2020 at 11:21

Agus Zubiaga · Accepted Answer · 2020-03-22 22:28:18Z

1

Your useEffect hook runs every time wallets changes, and it calls fetchConnections, which calls setWallets, which then triggers your useEffect hook because it changed wallets, and so on...

Pass an empty dependencies array to useEffect:

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

That will make it run only on mount.

If you still want to call fetchConnections whenever wallets changes, you shouldn't do it through an effect hook because you'll get the infinite loop you described. Instead, call fetchConnections manually whenever you call setWallets. You could make a function that does this for you:

const [wallets, setWallets] = useState([]);
const setWalletsAndFetch = (wallets) => {
  setWallets(wallets);
  fetchConnections(wallets);
}

edited Mar 22, 2020 at 22:28

answered Mar 22, 2020 at 22:20

Agus Zubiaga

5423 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Monica Maged Malaty Over a year ago

I tried using the 'setWalletsAndFetch' but I got the same results with the same infinite loop, and yes what I'm trying to do is calling fetchConnections whenever wallets changes.

Yoel · Accepted Answer · 2020-03-22 22:03:19Z

0

You listen to a change and then as it changes you change it over and over without stopping

 React.useEffect(() => {
          (async () => {
             fetchConnections();
          })();
       }, []);//remove wallets

answered Mar 22, 2020 at 22:03

Yoel

8,0256 gold badges32 silver badges64 bronze badges

Collectives™ on Stack Overflow

Running into an infinite loop when using useEffect() in react-native

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related