How to fix error in React: "Too many re-renders"?

Question

React

<>
         <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')))

Gives an error message:

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

What's wrong?

Answer 1

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