Categories
Mastering Development

React Rest Call Infinite Loop Using Hooks

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;

Leave a Reply

Your email address will not be published. Required fields are marked *