Как исправить ошибку в React'е: «Too many re-renders»?

Question

[Wadnory]

<>
         <h2 className='about-me__text'>
          ...
         </h2>
         <h4 className='about-me__text'>
           ...
         </h4>
         <p className='about-me__text'>
           ...
         </p>
         <p className='about-me__text'>
           ...
         </p>
         <p className='about-me__text'>
           ...
         </p>
</>

---

const [textNodes, setTextNodes] = React.useState()
setTextNodes(Array.from(document.querySelectorAll('.about-me__text')))

Выдает ошибку:

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

Что не так?

Answer 1

[insighter]

const [textNodes, setTextNodes] = React.useState(()=>Array.from(document.querySelectorAll('.about-me__text')))

Comments

[Wadnory]

Спасибо, помогло. Не могли бы вы, пожалуйста, объяснить, в чем ошибка?

[insighter]

Wadnory, во время рендера компонента, вы меняете его состояние (setTextNodes) это вызывает повторный ренедер и так до бесконечности. Стоит перечитать ещё раз доку по Реакту - это основы же.

По правде говоря я привел плохое решение. Надо делать через рефы.

[Alexandroppolus]

insighter, если не понадобится setTextNodes, то да, лучше через реф.

но может статься, что автор вопроса что-то дурное затеял, и надо вообще переделать по-нормальному, без всяких querySelectorAll

[insighter]

Alexandroppolus, я имел ввиду что лучше было обернуть компонент дивом и на него реф завести и уже в событиях, что то делать.

[insighter]

Wadnory, отметь ответ решением