CODEWITHSUNDEEP
node.jsreactjs
Omar Dak Elbab
Omar Dak Elbab

Reputation: 23

React JavaScript Axios requests problem appearing

I'm trying to get the data from Node.js, but it is making like 5000 requests and the server is getting very slow and don't even load some of the other images in other pages. Do I need to limit the requests?

Any solutions?

 const [data, SetData] = useState([]);

    useEffect(() => {
            axios.get(`/api/data/${id}`).then((response) => {
                SetData(response.data)
            })
    })

When I'm adding }, []) to useEffect the images from Public folder are not showing.

Upvotes: 0

Views: 35

Answers (2)

Sagie
Sagie

Reputation: 1074

Your effect probably missing the id as dependency. Change it to be like that:

 const [data, setData] = useState([]);

 useEffect(() => {
     if (id) {
         axios.get(`/api/data/${id}`).then((response) => {
             setData(response.data)
         });
     }
}, [id]);

Upvotes: 2

msapkal
msapkal

Reputation: 8346

useEffect runs after every render without the dependencies array, causing infinite loop

  useEffect(() => {
        axios.get(`/api/data/${id}`).then((response) => {
            SetData(response.data)
        });
        //Infinite loop
  });

Provide an empty dependencies array, this will cause the effect function to only run once after the component has rendered the first time.

  useEffect(() => {
        axios.get(`/api/data/${id}`).then((response) => {
            SetData(response.data)
        });
        // Correct! Runs once after render with empty array
  }, []);

Upvotes: 0

Related Questions