Infinite Loop Fetching

Question

The state restaurants changes from an input form in the front and updates a database in the back. Then the idea is to show the RestaurantList component with the new added restaurant from the input. The idea is not to use the useContext hook. I´ve tried using the useEffect hook to render the list everytime the restaurant state changes, but this makes infinit GET requests in my backend.

const RestaurantsList = (props) => {
  const [restaurants, setRestaurants] = useState("");

  useEffect(async () => {
    try {
      const response = await fetch("http://localhost:3001/api/v1/restaurants");
      const data = await response.json();
      setRestaurants(data);
      console.log(data);
    } catch (err) {
      console.log(err);
    }
  }, [restaurants]);

...

With this code, the front updates OK and shows the new restaurant, but the back keep making get requests. Why is this happening if the restaurants state isnt changing? Any recommendation? How can I avoid this loop?

I've tried one thing that works and is to remove the preventDefault event when I click the add button. In this way, the page reloads and do what I want but i dont know if it is the best practice:

const AddRestaurant = () => {
  const [name, setName] = useState("");
  const [location, setLocation] = useState("");
  const [priceRange, setPriceRange] = useState("");


 const handleSubmit = async function (e) {
    //e.preventDefault();

    try {
      await fetch("http://localhost:3001/api/v1/restaurants", {
        method: "POST",
        made: "cors",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name,
          location,
          price_range: priceRange,
        }),
      });
    } catch (err) {
      console.log(err);
    }
    setName("");
    setLocation("");
    setPriceRange("");
  };
 return (
    <div className="mb-4">
      <form action="" on>
        <div className="form-row">
          <div className="col">
            <input
              type="text"
              value={name}
              className="form-control"
              placeholder="Name"
              onChange={nameUpdate}
            />
          </div>
          <div className="col">
            <input
              className="form-control"
              value={location}
              type="text"
              placeholder="Location"
              onChange={locationUpdate}
            />
          </div>
          <div className="col">
            <select
              className="custom-select my-1 mr-sm-2"
              value={priceRange}
              onChange={(e) => setPriceRange(e.target.value)}
            >
              <option disabled>Price Range</option>
              <option value="1">$</option>
              <option value="2">$$</option>
              <option value="3">$$$</option>
              <option value="4">$$$$</option>
              <option value="5">$$$$$</option>
            </select>
          </div>
          <button className="btn btn-primary" onClick={handleSubmit}>
            Add
          </button>
        </div>
      </form>
    </div>
  );
};

export default AddRestaurant;

We could just answer everything here on Stackoverflow with "Try to google" couldn't we? @ArenTrot Are you suggesting this is a duplicate? When you get enough rep you can vote to close with that suggestion. Until then, perhaps be a bit friendlier? — JNevill
– JNevill, Commented Dec 14, 2021 at 21:57

Uwe Allner · Accepted Answer · 2021-12-15 08:51:15Z

2

are you saying that RestaurantsList() is throwing the infinite loop? Everything I see here is frontend code. The reason you are getting an infinite loop is because you have a set dependency of [restaurants] in your useEffect hook. Every time it grabs that data it gets updated, causing it call the function again. If you just want it to fetch the data once then leave the dependency array blank.

Try this:

   const [restaurants, setRestaurants] = useState("");
   
   useEffect(() => {
            const fetchData = async () => {
            const response = await fetch('http://localhost:3001/api/v1/restaurants')
            const data = await response.json();
            console.log(data);
            setRestaurants(data);
        }
        fetchData();
    }, []);```

edited Dec 15, 2021 at 8:51

Uwe Allner

3,4879 gold badges40 silver badges52 bronze badges

answered Dec 15, 2021 at 0:14

Ryan Speciale

1781 silver badge11 bronze badges

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

9 Comments

miouri Over a year ago

With your solution it does not work what I want. When I click de Add button on my AddRestaurant component, the database updates, but on the front the DOM dont re render and that new restaurant do not appear on the RestaurantList

miouri Over a year ago

any comment @Ryan??

Ryan Speciale Over a year ago

so you want it to appear without the page being refreshed is that what you are saying? The component should show the correct data when the page is refreshed.

miouri Over a year ago

correct Ryan. I want to apear without refreshing. I have a list on the screen, I add a new row on the db by a fetch(post) and then I want the list to be updated, but without refreshing.

miouri Over a year ago

if I add the [restaurant] deppendency, it starts to fetch(get the data) in infinite loop...

|

Collectives™ on Stack Overflow

Infinite Loop Fetching

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related