React Redux Form Error Using Validation - Maximum Update Depth Exceeded

If you are trying to add field validation to React Redux Form but when you come to run your page, it errors and goes into an infinite loop, then this tutorial may be able to help you.

Let's Get Started

First, I'm assuming you're using React Forms Field validations, so you have some code that looks similar to this:

render() {
const getValidations = [required, maxLength];
           
<Field
  name="field"
  type="text"
   validate={getValidations()}
 />
 }

First, let's try to understand the problem. The max loop error is being triggered because somewhere in the code, whether it be yours, or redux form, something is making React called the render() method too many times.

Can You Make Your Validations Costs?

In the example above, I'm passing a function into my validate call. As I'm passing a function into a prop, validate on Field element points to a new object each time rerender is called.  This then triggers React to re-render.  If you have a form with 20 components, with complex logic, this can cause all sort of unwanted re-renders.

If it's possible in your situation if you can ensure you pass in an object whose reference will not change, on rerendering your problem will likely go away.  For example looking on the redux form example: 

const required = value => value ? undefined : 'Required'
const maxLength = max => value =>
  value && value.length > max ? `Must be ${max} characters or less` : undefined
const maxLength15 = maxLength(15)

const FieldLevelValidationForm extends PureComponent {
  render (
    <form >
      <Field name="username" type="text"
        validate={[ required, maxLength15 ]}
      />
  />)
}

If you saw this example you might have missed that the validators have been defined outside the component as costs.  These are passed directly into validate.  In my example, I'm passing in a function into validating.  The function figures out what should go there.  This is the issue you need to fix.  The field prop is being treated by React as constantly changing on each render().  This means React cannot work in its usual performant way.  Instead, the whole form needs to be re-calculated each time.  Your validation rules need to re-calculate on each render, for each field...  massive performance   When a user changes an input, the whole form needs to be re-calculated.  In this situation, you tell React to constantly try and re-paint and after a certain amount of updating, it falls over.

Are You Using PureComponent?

When building a component in React. The different between inheriting from your component or PureComponent is usually a performance decision (more info here).  Pure component allows React to try and optimize the page rendering by doing a shallow copy compare of the state within shouldComponentUpdate().

If you get a maximum update error with Redux Form within your PureComponent it is likely that the shallow comparison in the render isn't catching something.  One way to get around this problem is to try changing your component to inherit from a normal Component and then dealing with yourself, like this on the state:

 shouldComponentUpdate(nextProps, nextState) {
        return nextState !== this.state;
    }

Or on the props

 shouldComponentUpdate(nextProps, nextState) {
shouldComponentUpdate(nextProps, nextState) {
    return JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
  }
    }

This solution solved the issue in my instance. In my situation, I was creating dynamic validation rules from an API. This meant it was had to pass in a pre-set list of validations, not generated by a function into my field validate.

Another way around this problem that worked was to create a higher order component, that wrapped the validation call. Doing this approach meant the validation call was made within child field component, rather than the form. Splitting my components into smaller components, then allowed React to re-render less

 

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top