Why is React re-rendering infinite times?

Question

React

Good afternoon.
Mastering ToDo App. By clicking "Add note" the corresponding action is dispatched, everything is fine here.
I want to store the list of ready-made notes in an array, and draw them through .map(), and so that after each addition of a note and redrawing, the notes array is not reset, I write it to state.
But, react throws an error:

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

I tried to write down just any number in state, but the error did not disappear. I remove the state change - the error disappears. I add with any value - again an endless re-rendering.
The component code looks like this:

import React, {useState} from 'react'
import './Notes.css'
import { connect } from 'react-redux';
const Notes = (props)=>{
  let [notes, setNotes] = useState();
  let key = 0;
  setNotes(123123)
  console.log(props.notes)

  /*for(let i = 0; i<16; i++){
    notes.push(<div key={++key} className="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>)

  }*/

  return (

    <div className="masonry">
      { console.log(props.notes)} {
        /*props.notes.map(

        (e)=>{
        return <div key={++key} className="item">{e[0]} - {e[1]}</div>
        }
      )*/
      }
    </div>
  )
}

const mapStateToProps = (state)=>{
  return {
    notes: state
  }
}

export default connect(mapStateToProps)(Notes)

PS I know that it’s not worth it to execute logic not in reducers, nor in components, I’ll use redux-thunk a little later, for now

Answer 1

Because you are constantly updating the state.
Probably, you wanted to set the initial value - specify it as a parameter when calling useState.