React successfully executes a function onClick but not in other parts of this.render

I have a function stopRecording() that I'd like to be called when a timer runs out, or when someone presses a stop button. The problem is that when it is called when the timer runs out (the first half of the render function) it is called continuously, despite me bracketing it in an if clause. When it is called as a button event (in the return half of the render function) then it works fine.

Note my console logs. When I open the console in Chrome and let the timer run out, the console logs I marked as successful in my code body runs, but NOT ones that I commented with //!!!. I also get the following error continuously: Invariant Violation: setState(...): Cannot update during an existing state transition (such as withinrender). Render methods should be a pure function of props and state.

//...
stopRecording: function() {
    if (this.state.recording){
        console.log("this will log as expected") 
        this.setState({recordingStatus:"",
                        recording:false})
        console.log("this will NOT log as expected'") //!!!
        this.props.emit("recEmit")
    }
}
render: function() {
    var timeBar;
    var countdown = "0";
    var timeBarFill = "#FF9090"
    if (this.state.recording){
        countdown = new Date()-this.state.startTime
        timeBarFill = "#FF3830";
        if (countdown > this.state.maxRecLength){
            console.log('this will log as expected')
            countdown=0
            this.stopRecording()
            console.log('this will NOT log as expected') //!!!

        };
    }
//...
return(
    //...
     <button type="button" id="button" onClick={this.stopRecording}><b>Stop</b></button>
    //...
)