React component re-rendering many times-CodePudding

i have a react component thats keep re-rendering idk why but i think the reason is the data fetching

data code :

export function KPI_Stock_Utilisation() {
  const [kpi_stock_utilisation, setKpi_stock_utilisation] = useState([{}]);

  useEffect(() => {
    axios.get("http://localhost:5137/KPI_Stock_Utilisation").then((response) => {
        setKpi_stock_utilisation((existingData) => {
        return response.data;
      });
    });
  }, []);
  console.log('data get')

  return kpi_stock_utilisation;
}

this log displayed many times , and the log in the component too

component code :

import React from "react";
import { KPI_Stock_Utilisation } from "../../Data/data";
import { useEffect } from "react";

export default function WarehouseUtilisChart(props) {

  let kpi_stock_utilisations =KPI_Stock_Utilisation();
  let Stock_utilisation = (kpi_stock_utilisations.length / 402) * 100;
    console.log('component render')

return (
    <div>
            <p>{kpi_stock_utilisations}</p>
    </div>
  );
}

im new with react i tried useEffect inside the componenets but its not working

CodePudding user response：

You got into infinite loop.

Its hard to explain why it doesn't work as expected, but I can try.

First of all, useEffect with empty array of dependencies works like componentDidMount and fires only after (!) first render.

So you have some value returned from your let kpi_stock_utilisations =KPI_Stock_Utilisation(); then it rendered, after this your useEffect fires a request and set state, setting of state trigger re-render and new value to return, this new value trigger your parent component to return let kpi_stock_utilisations =KPI_Stock_Utilisation(); might run again.

If you are trying to create a custom hook for fetching some info, follow rules of hooks

I hope it helped you

CodePudding user response：

Calling the react custom hook KPI_Stock_Utilisation several times will for sure render more than once. in your case I suggest you use useEffect in the same component as I will show you.

import React,{useEffect,useRef} from "react";
import { KPI_Stock_Utilisation } from "../../Data/data";
import axios from 'axios';

export default function WarehouseUtilisChart(props) {

 const [kpi_stock_utilisation, setKpi_stock_utilisation] = useState([{}]);
 const stock_utilisation= useRef(0);

useEffect(() => {
    axios.get("http://localhost:5137/KPI_Stock_Utilisation").then((response) => {
      stock_utilisation.current = (response.data.length / 402) * 100;
        setKpi_stock_utilisation(response.data);
    });


//this will guarantee that the api will be called only once
  }, []);

 //you should see this twice, one with the value 0, and another one, the calculated data
    console.log('component render',stock_utilisation.current)

return (
    <div>
            <p>{kpi_stock_utilisations}</p>
    </div>
  );
}

To note, if you call this component from more than one location, for sure it will render several times - keep that in mind.

On the other hand, all your variables should always start with a lower case and try to name your variables like this: instead of kpi_stock_utilisation change it to kpiStockUtilisation for a better coding practice