ReactJS Error: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

This is a very common error for reactjs beginners, if you are facing this error it means your render method is modifying the state of your component, causing it to re-render, which then will modify it again and so on. You are dealing with an infinite loop here, if you take a look at your console (before your browser crashes) you’ll see something like this:

setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
setState(…): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Before I explain how to solve it I’ll show you the most probable reason why it’s happening, let’s analyze the following component:

class ErrorSimulation extends React.Component {
 
  constructor(props) {
    super(props);
    this.state = {
      x : 1
    };
  }
 
  _changeValue(newValue){
    this.setState({newValue});
  }
 
  render() {
    return <a onClick={this._changeValue(2)}>Change Value</a>
  }
}

Note that the render() method is calling the function _changeValue(), if you take a look at this function you’ll see that it’s modifying the state. Nothing wrong, right? This should be OK, otherwise how would the component be able to modify it’s own state? Well, the problem here is the way we call the function, by doing it like I did in this example the function _changeValue() will actually be called and executed right away during the state transition, this will cause the problem. We can solve that by changing a little bit the way we call the function.

Instead of doing this:

<a onClick={this._changeValue(2)}>Change Value</a>

we call it like this:

<a onClick={this._changeValue.bind(2)}>Change Value</a>

By using bind() your function won’t be called during the state transition anymore, it will complete the process and leave the function to be called later, this will prevent the problem from happening.

Recommended for you

4 comments on “ReactJS Error: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

  1. Chris Bailey

    I also found that the React Developer tools for Chrome seem to make this error happen very easily, even though no actual code is doing it (so my theory is the React Developer tools, which are themselves written in React, have this bug).

  2. Zeph
     <a>Change Value</a>

    this immediately runs the _changeValue function upon the writing of the HTML, as you have a () after it.

     <a>Change Value</a>

    or

     <a> { this._changeValue(2); } }>Change Value</a>

    is the correct solution (nesting it within a function)

    Your bind solution works because bind returns a function, the same as nesting.

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>