Why am I having too many re-renders in my React.useEffect()?

user_19105436 0
Viewed 59

I'm still beginner using ReactJS and I'm not understanding a problem I'm having.

My useEffect is getting a list of data and after that I do a filter.

But when I save the data value of this filter, and with a console.log() I try to see the return value of my filter, there is an infinite loop of data saved being loaded and I don't understand why this is happening.

Can anyone help me with this?

Here's my code and it's more easy to understand what I mean:

And I put my code into codesandbox

print of console.log()

import React, { useRef } from "react";
import { Map, TileLayer } from "react-leaflet";

import { getAccommodations } from "./data";

import "./styles.css";

const App = () => {
  const center = [-27.592495455704718, -48.484572875610034];

  const mapRef = useRef();
  const [thing, setThing] = React.useState(0);
  const [accommodationData, setAccommodationData] = React.useState([]);

  React.useEffect(() => {
    if (mapRef.current) {
      const response = getAccommodations();

      const _response = response.filter((accommodation) => {
        return mapRef.current.leafletElement
          .getBounds()
          .contains([accommodation.listing.lat, accommodation.listing.lng]);
      });

      setAccommodationData(_response);
    }
  }, [center, thing, accommodationData]);

  // I commented this line to avoid too many re-renders
  // console.log("accommodationData: ", accommodationData);

  return (
    <Map
      ref={mapRef}
      style={{ width: "100%", height: "100vh" }}
      center={center}
      zoom={13}
      onmoveend={() => {
        setThing(thing + 1);
      }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      {/* I'll add some <Markers> here with the accommodationData array */}
    </Map>
  );
};

export default App;

Thank you very much in advance

reactjs javascript
1 Answers

The useEffect hook keep trigger because you are changing the state accommodationData which is one of the dependencies of useEffect. So you have just to remove it from dependencies or add another state response and then change accommodationData when you have a response, example :

  const center = [-27.592495455704718, -48.484572875610034];

  const mapRef = useRef();
  const [thing, setThing] = React.useState(0);
  const [accommodationData, setAccommodationData] = React.useState([]);
  const [response, setResponse] = React.useState(null);

  React.useEffect(() => {
    if (mapRef.current && !response) {
      const response = getAccommodations();

      const _response = response.filter((accommodation) => {
        return mapRef.current.leafletElement
          .getBounds()
          .contains([accommodation.listing.lat, accommodation.listing.lng]);
      });

      setResponse(_response);
    }
  }, [center, thing, accommodationData]);
  
  React.useEffect(() => {
    if (response) setAccommodationData(_response);
  }, [response]);
user_180744360
Related