Частый ре-рендеринг, где ошибаюсь?

Question

[Danoneko]

Подскажите пожалуйста где ошибаюсь?

Структура такая

const InnerContainer = ({status, ...props}) => {
   const [blocks, setBlocks] = useState(bigData); 
   function applyStatus(i) {
      setBlocks(i); // строка после которой вылезает ошибка
    }
   applyStatus(status); // массив типа (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 />
)
}

Функция сортировки(sorting) и InnerBlock удачно работали, пока не добавил еще одну setBlocks(i) в applyStatus. Вылезают ошибки ре-рендеринга

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Как исправить такую ошибку?

Comments

[Danoneko]

в общем и целом, у меня есть массив объектов, в основном блоке я его вывожу и делаю поиск по нему. в одной вызываемой функции делаю сортировку по алфавиту, а в других функциях хотел сделать фильтрацию по объектам, но не удалось:) в общем как быть не знаю, как исправить тоже, можно ли вообще так рендерить. я новичок в этом. Буду благодарен за любую подсказку!

[GlazOtca]

Danoneko, Вам нужно больше узнать о принципах работы реакт-приложений и в первую очередь о жизненном цикле компонентов.
Конкретно, в вашем случае - установка стейта (setBlocks) - обязывает реакт произвести ререндер. И это происходит каждый раз, потому что setBlocks у вас срабатывает каждый раз, а не только во время первоначальной загрузки. Обычно, для этого используют хук useEffect

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

[Danoneko]

GlazOtca, Подскажите, что делать если в таком случае появляется новая ошибка бесконечного ре-рендеринга?

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.

[Danoneko]

Danoneko, задал вопрос тут

Answer 1

[Владислав Великоиваненко]

Какие блоки в реакте? Можно более четко написать, где и в каком компоненте находится логика? Какой компонент родительский, какой дочерний, или всё в одном компоненте каком-то происходит и эти куски кода из одного компонента все?

Comments

[Danoneko]

Да извините, сейчас подправлю