React Hooks Updating Array State Causes Infinite Loop

setNudgeList will re-render your component. But your if condition Number(avgOrderCount) <= 9999 will always true So, setNudgeList will be called every render.

if your condition is true, you will trigger a Re-render of the component by setting the NudgeList. In the Re-render, if your condition is still true, setting NudgeList will trigger the next Re-render, hence the infinite loop. you should use effect to handle the setting function. For example:

useEffect(()=>{
  if (Number(avgOrderCount) <= 9999) {
    if ((productCategory === ProductCategoryType.BEAUTY 
  || productCategory === ProductCategoryType.SOME_BEAUTY) 
  && ecoPackage === ecoPackageType.YES 
  && domesticDelivery === domesticDeliveryType.YES 
  && !foreignSalesTypeList.includes('open_market') 
  && !foreignSalesTypeList.includes('export') 
  && !foreignSalesTypeList.includes('none') 
  && foreignSalesTypeList.length >= 1) {
      setNudgeList(list => [...list, eco, sample, orderSheet, wrongDelivery, oliveYoung, api, fifo, manager])
    }
  }

}, [avgOrderCount, productCategory...//all the dependence, sorry they are too many ])

The issue is that there's nothing in either of your conditions that prevents the setNudgeList call from being run again (or a check that it has already run). So each time your component renders, it runs the setNudgeList call, which triggers a re-render, which again invokes setNudgeList.

You can fix this by wrapping this logic within a useEffect hook and setting the dependency array accordingly. As long as you either omit nudgeList from the dependency array or include a check on the value of nudgeList within the useEffect call you should avoid infinite re-renders.

The useEffect hook only calls the given callback when the value of anything in the dependency array changes. This way you can control which changes should cause the effect to run again.

Example:

  const [avgOrderCount, setAvgOrderCount] = useState('')
  const [productCategory, setProductCategory] = useState('')
  const [ecoPackage, setEcoPackage] = useState('')
  const [domesticDelivery, setDomesticDelivery] = useState('')
  const [foreignSalesTypeList, setforeignSalesTypeList] = useState([]
  const [nudgeList, setNudgeList] = useState([]) 


  React.useEffect(() => {
    if (Number(avgOrderCount) <= 9999) {
      if ((productCategory === ProductCategoryType.BEAUTY || productCategory === ProductCategoryType.SOME_BEAUTY) && ecoPackage === ecoPackageType.YES && domesticDelivery === domesticDeliveryType.YES && !foreignSalesTypeList.includes('open_market') && !foreignSalesTypeList.includes('export') && !foreignSalesTypeList.includes('none') && foreignSalesTypeList.length >= 1) {
        setNudgeList(list => [...list, eco, sample, orderSheet, wrongDelivery, oliveYoung, api, fifo, manager])
      }
    }
  }, [avgOrderCount, productCategory, ecoPackage, domesticDelivery, foreignSalesTypeList]);

Note this will still cause nudgeList to be updated if any of the values in the dependency array (avgOrderCount, productCategory, ecoPackage, domesticDelivery, or foreignSalesTypeList) changes. So you may also want to add a check on the value of nudgeList or another variable to keep track of whether you've already updated nudgeList or not.