Как остановить бесконечный цикл рендеринга useEffect?

Question

[Danoneko]

Что нужно изменить в нужно изменить в useEffect, что бы не появлялась ошибка

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

const [blocks, setBlocks] = useState(bigData);

  const ApplyStatus = (i) => {
    var rez;
    if (i.length === 1) {
      i = i.reduce((it) => it);
      rez = bigData.filter((a) => a.status === i.id);
    } else {
      rez = bigData;
    }

    useEffect(() => {
      setBlocks(rez); // ?
    }, [rez]);
  };
  ApplyStatus(statuses);

Comments

[Danoneko]

пробовал менять useEffect на useCallback, но не совсем понимаю ка передать параметр в него

[Alexandroppolus]

statuses - это что?

[Danoneko]

Alexandroppolus, массив объектов

[Alexandroppolus]

Danoneko, из пропсов?

[Danoneko]

Alexandroppolus, да

[Alexandroppolus]

Danoneko, a setBlocks ещё где-то кроме ApplyStatus используется?

[Danoneko]

да, структура примерно следующая

const InnerContainer = ({statuses, ...props}) => {
   const [blocks, setBlocks] = useState(bigData); 
     const ApplyStatus = (i) => {
    var rez;
    if (i.length === 1) {
      i = i.reduce((it) => it);
      rez = bigData.filter((a) => a.status === i.id);
    } else {
      rez = bigData;
    }

    useEffect(() => {
      setBlocks(rez); // тут бесконечный рендеринг
    }, [rez]);
  };
  ApplyStatus(statuses); // statuses массив типа (n) [{…}, {…}, {…}, ... {…}]

  function sorting(){
      if(...){
        if(...){....setBlocks(sort)}else{setBlocks(sort)}
     }else{
        if(...){....setBlocks(sort)}else{setBlocks(sort)}
     }
   }

   const InnerBlock = () => {
     return blocks.filter(...).map(...)
   }
return(
{sorting} // где-то внутри пару раз вызывается 
<InnerBlock />
)
}

Answer 1

[Alexandroppolus]

немного переделал код

const InnerBlock = ({blocks}) => {
    return blocks.filter(...).map(...)
}

const getBlocks = (statuses) => {
    if (statuses.length === 1) {
        const sid = statuses[0].id;
        return bigData.filter((a) => a.status === sid);
    } else {
        return bigData;
    }
}

const InnerContainer = ({statuses, ...props}) => {
    const [blocks, setBlocks] = useState(() => getBlocks(statuses));

    useEffect(() => {
        setBlocks(getBlocks(statuses));
    }, [statuses]);

    function sorting(){
        if(...){
            if(...){....setBlocks(sort)}else{setBlocks(sort)}
        }else{
            if(...){....setBlocks(sort)}else{setBlocks(sort)}
        }
    }
    
    return(
        {sorting} // где-то внутри пару раз вызывается 
        <InnerBlock blocks={blocks} />
    )
}

ещё не совсем понятно, как у тебя там "вызывается" sorting. Если напрямую, то надо бы тоже что-то поменять.
useEffect нужен для случая, если statuses поменяется с обновлением компонента.
ну и вынос InnerBlock наружу, ибо создавать компонент внутри другого компонента - содомия покруче многих других.