Function 在 jsx 中调用时更新 useState 钩子，导致无限循环

Question

I have a function that fetches data and updates a useState hook but when i call that function inside jsx it causes an infinite loop, I have tried to put a condition in jsx before i call the function to avoid infinite loop but then the function doesn't work properly. Below is my code

My Function

const fetchDataFnc = (booking) => {
  const fleetId = booking.booking_bids_fleet_id
  const bookingId = booking.booking_id
  console.log("fleetId" ,fleetId)
  if(booking.booking_bids_fleet_id){
    firebase.database().ref('fleets/' + 
      fleetId[0]).child("booking_bids").child(bookingId).on('value', (snapshot) => {
      console.log("fleet snap",snapshot.val())
        setFirstPrice(snapshot.val().price[0])
        setAllPrices(snapshot.val().price)
        console.log("all the prices", snapshot.val().price)
        console.log("fleet collect", snapshot.val());
    });
  }
  if(booking.booking_bids_fleet_id){
    firebase.database().ref('booking/' + bookingId).child("booking_bids_prices").set({
      firstPrice
    });
  }
}

My Jsx

{selectedBooking.length > 0 ? selectedBooking.map((booking)=>{
                // showFirstPrice(booking)
                if(Math.random() > 0.5) {
                  fetchDataFnc(booking)
                }
                return( 
                  <>
                  {firstSel &&
                    <SelectedBooking
                      booking_ref={booking.booking_ref}
                      firstPrice={firstPrice}
                      booking={booking}
                      handleSettle={handleSettle}
                      setSettleAmount={setSettleAmount}
                      settleAmount={settleAmount}
                      allPrices={allPrices}
                      handleAccept={handleAccept}
                    />
                  } 
                  </>
                )
              }):
                <></> 
              }

Answer 1

Don't call a function which updates state on every render . Updating state triggers a re-render, so the component will endlessly re-render and re-invoke the function.

You're probably looking for the useEffect hook. For example, to call the function once when the component first loads and then not again afterward, pass an empty dependency array to the hook:

useEffect(() => {
  fetchDataFnc(booking);
}, []);

Though in this case booking is a dependency. To re-invoke the function any time that dependency changes, add it to the dependency array:

useEffect(() => {
  fetchDataFnc(booking);
}, [booking]);

---

As an aside, you also probably don't want to do all this inside the JSX . The logic of the component, such as state and effects and helper functions, all happens before the JSX. The JSX is the result returned by the component, which itself is a function like any other.