UseEffect doesn't behave as expected -

user_11430062 0
Viewed 81

When I refresh the page useEffect only render one function out of the two inside, and when I change routes it works normally.

I am using redux to set global state with the vehicles and dispatching the API in useEffect so I have vehicles available all the time. however, the second function vchStatusNumbers that it should return the length of the array filtered as per its status , it only runs once, and when i add its state as dependency i get an infinite loop!

I need to understand how i should approach it?

Below is the component

import React,{useEffect,useState} from "react";
import StatisticBanner from "./StatisticBanner";
import {getAllVehicles,fetchVehiclesReport } from "./vehiclesReducer";
import { useSelector, useDispatch } from "react-redux";

 const Home= ()=> {
  const {vehicles} = useSelector(getAllVehicles); // get the state
const [statusTotal, setStatusTotal] = useState({})
  const dispatch = useDispatch(); // dispatch fn to reducers



  useEffect(() => {
    dispatch(fetchVehiclesReport());
    vchStatusNumbers();
  }, [dispatch]);

  const vchStatusNumbers = () =>{
    const status = {}
    let availableLength = 0
    let parkedLength = 0
    let serviceLength = 0
      vehicles.map(vch=>{
      if(vch.status === 'available'){
        ++availableLength
        status.available = availableLength
    
      }
      if(vch.status === 'parked'){
        ++parkedLength
        status.parked = parkedLength
      }
      if(vch.status === 'service'){
        ++serviceLength
        status.service = serviceLength
      }
    })
  
    setStatusTotal (status)
  }

  return (
    <>
        <div style={{ margin: 20 }}>
          <StatisticBanner key={"statics"} statusTotal={statusTotal} />
        </div>
    </>
  );
}
export default   Home
use-effect react-hooks reactjs
1 Answers

Yes, if you add a dependency to an useEffect hook that ultimately updates that dependency value then this will cause render looping.

Seems vchStatusNumbers should be in a separate useEffect hook with a dependency on the vehicles redux state value.

useEffect(() => {
  vchStatusNumbers();
}, [vehicles]);

This is because it is derived state from the vehicles data and won't be updated yet in the first effect that dispatches the action to update it.

user_86908570
Related