React Rest Call Infinite Loop Using Hooks

Question

I am noticing that my component is stuck in an infinite loop. It keeps making the same rest call.

It is my understanding that useEffect hooks work similar to ComponentRender and ComponentUpdate lifecycle functions.

Also, I think what is happening is this but not able to fix it:

On render - > API called -> Updated Error state -> Component Updated -> UseEffect Hooked called again

Can you help me?

import React, { useState, useEffect } from "react";
import "./ResultsPage.css";
import Error from "../components/Error";

function Homepage() {
  let username = "test";

  const [error, setError] = useState({ exists: false, value: null });
  const [userData, setUserData] = useState(null);

  const getUsernameData = () => {
    fetch(`testAPI/${username}`)
      .then((response) => {
        if (response.status === 404) {
          return setError({ exists: true, value: response.status });
        }
        return response.json();
      })
      .then((json) => setUserData(json))
      .catch((error) => {
        setError({ active: true, type: 400 });
      });
  };
  useEffect(() => {
    getUsernameData();
  });

  return (
    <div className="Homepage">
      {error.exists && <Error error={error} username={username} />}
      {!error.exists && <h1>Error does not exist</h1>}
    </div>
  );
}

export default Homepage;

Brian Thompson · Accepted Answer · 2020-05-12 21:04:46Z

2

useEffect will run on every render unless you tell it otherwise. Your effect has no dependency array, so it is running every render, triggering a re-render, and then starting over again infinitely.

You can tell the useEffect to only run once on mount by giving it an empty array:

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

You can also tell it to only run when certain things change. Do this by adding the variables to the dependency array:

useEffect(() => {
  getUsernameData();
}, [variable_to_depend_on]);

answered May 12, 2020 at 21:04

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

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

2 Comments

Chris Adams Over a year ago

upvoting Brian's answer for including the 'why' as well as the the 'what'.

vishalkohli Over a year ago

Thanks @Brian for taking your time to answer this in-depth!

Chris Adams · Accepted Answer · 2020-05-12 21:03:40Z

1

Try changing...

useEffect(() => {
    getUsernameData();
});

to

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

answered May 12, 2020 at 21:03

Chris Adams

1,4741 gold badge10 silver badges16 bronze badges

2 Comments

vishalkohli Over a year ago

Thank you. For anyone wanting to know how it is done, follow this link : reactjs.org/docs/…

Jared Smith Over a year ago

You should a) memoize your fetch function with useCallback and b) add it to your dependency array for useEffect. Or if not, you may wish to explain why....

Collectives™ on Stack Overflow

React Rest Call Infinite Loop Using Hooks

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related