CODEWITHSUNDEEP
javascriptreactjsaxios
user14414828
user14414828

Reputation:

React server sending 4 requests every second to backend API

So I'm trying to make a web application where it fetches products from the backend API and displays it into React frontend, But the problem here is that React Frontend server is sending 4-5 requests every second and this can be very stressful for the backend server. Is there any way I can make it so it only sends 1 request every time the page is loaded?

Here is my code:

import React, {useState, useEffect} from 'react'
import { Card } from 'react-bootstrap'
import axios from 'axios'


function HomeScreen() {
    const [products, setProducts] = useState([])

    async function getProducts() {
        try {
          const response = await axios.get('http://localhost:8000/api/products/');
          setProducts(response.data);
        } catch (error) {
          console.error(error);
        }
      }
      getProducts()
    return (
        <div>
            {products.map(product => (
                <Card className="my-3 p-3 rounded">
            <Card.Img src={'http://localhost:8000' + product.image} />
            <Card.Body>
            <Card.Title as="div">
                <strong>{product.name}</strong>
            </Card.Title>
            <Card.Text as="div">
            
            </Card.Text>
            <Card.Text as="h3">
            ${product.price}
            </Card.Text>
            </Card.Body>
        </Card>
            ))}
        </div>
    )
}

export default HomeScreen

Upvotes: 0

Views: 260

Answers (2)

Abdullah Abid
Abdullah Abid

Reputation: 1661

The Problem here is that you are using the getProducts method inside the functional component without any condition so it keeps re-rendering. This is how you fix it:

use a hook called useEffect to call the getProducts method when the component is mounted

import React, {useState, useEffect,useEffect} from 'react'
import { Card } from 'react-bootstrap'
import axios from 'axios'


function HomeScreen() {
    const [products, setProducts] = useState([])
    useEffect(()=>{
        // eslint-disable-next-line   
        getProducts();
    },[]);
    async function getProducts() {
        try {
          const response = await axios.get('http://localhost:8000/api/products/');
          setProducts(response.data);
        } catch (error) {
          console.error(error);
        }
      }
      
    return (
        <div>
            {products.map(product => (
                <Card className="my-3 p-3 rounded">
            <Card.Img src={'http://localhost:8000' + product.image} />
            <Card.Body>
            <Card.Title as="div">
                <strong>{product.name}</strong>
            </Card.Title>
            <Card.Text as="div">
            
            </Card.Text>
            <Card.Text as="h3">
            ${product.price}
            </Card.Text>
            </Card.Body>
        </Card>
            ))}
        </div>
    )
}

export default HomeScreen

Upvotes: 1

Kishieel
Kishieel

Reputation: 2053

You should wrap yoUr request inside useEffect hook. This prevent from calling function each time when component state change.

useEffect(() => {
    async function getProducts() {
        try {
          const response = await axios.get('http://localhost:8000/api/products/');
          setProducts(response.data);
        } catch (error) {
          console.error(error);
        }
      }
   getProducts()
},[])

Now your request will be send only once after component will be mounted.

Upvotes: 2

Related Questions