title: Why is react repeatedly calling setState() when i call it with an eventHandler
body: <p>I'm creating a Tetras game with react, all was working well and executing as expected till is added a <em><strong>Keyboard EventListener</strong></em> which majorly listens for the the Right and Left arrow key to move the component
  The Problem is, every time I call <em>setState()</em> in the function i assigned to the event it keeps repeating the same setState() function, without it even rendering the component, as a result i get the &quot;<strong>Maximum update depth exceeded</strong>&quot; Error.
  the code for my component:</p>
  <pre><code>class App extends React.Component {
    constructor () {
      super()
      this.state = {
        allBlocks: [],
        allBlockClass: []
      }
      setInterval(this.newBlock, 5000)
  
      document.addEventListener('keyup', this.userInput)
    }
    userInput = e =&gt; {
      switch (e.key) {
        case 'ArrowLeft': {
          this.moveLeft()
          break
        }
        case 'ArrowRight': {
  //        this.moveRight()
          break
        }
        default: {
          console.log('either left or right key')
        }
      }
    }
      moveLeft = () =&gt; {
      this.setState(prevState =&gt; {
        const old_state = Object.assign([], prevState.allBlocks)
        let newBlocksClass = prevState.state.allBlockClass
        const new_state = old_state.map((blockData, index) =&gt; {
          if (blockData.active) {
            blockData.x_axis -= BLOCK_INCREMENT
            if (!(index &gt; this.state.allBlockClass.length - 1)) {
              newBlocksClass[index].moveBlockLeft(BLOCK_INCREMENT)
            }
          }
          return blockData
        })
        return { allBlocks: new_state, allBlockClass: newBlocksClass }
      })
    }
    newBlock = () =&gt; {
      let positions = generateBlockPositions()
      const blockData = {
        positions: positions,
        active: true,
        x_axis: axis_props.Min_x_axis + BLOCK_INCREMENT * randomInt(3),
        y_axis: axis_props.Min_y_axis + BLOCK_INCREMENT
      }
      this.setState(prevState =&gt; {
        let new_state = [...prevState.allBlocks]
        new_state.push(blockData)
        return { allBlocks: new_state }
      })
    }
  render () {
      this.resetValues()
      return (
        &lt;div className='myBody'&gt;
          {this.state.allBlocks.map((blockData, index) =&gt; {
            this.numberOfBlock++
            return (
              &lt;CreateBlockStructure
                x_axis={blockData.x_axis}
                y_axis={blockData.y_axis}
                positions={blockData.positions}
                key={index}
                id={index}
                run={blockData.active}
                shouldRun={this.shouldRun}
                inActivate={this.inActivate}
                addBlockStructure={this.addBlockStructure}
              /&gt;
            )
          })}
          &lt;button onClick={this.moveLeft}&gt;Move left&lt;/button&gt;
          &lt;button onClick={this.moveLeft}&gt;Move Right&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  </code></pre>
  <p>You can checkout the <a href="https://github.com//prosperCoded/TetrisGame.git" rel="nofollow noreferrer">full code for this project</a></p>
  <p>The <strong>moveLeft()</strong> works properly outside the Keyevent function but when i call it with any other event handler it infinitly calls the <em>setState()</em> method
  e.g the MoveLeft button</p>
  <p>the <strong>moveBlockLeft()</strong> is just a simple func in another component</p>
  <pre><code>moveBlockLeft(by){
      this.setState((prevState)=&gt; {
        return {x_axis: prevState.x_axis - by}
      })
    }
  </code></pre>
  <p>Please i've really spent a lot of time debugging this bug, i have no idea what is going on
  Thanks in advance</p>