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:

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 call 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:

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:

Or on the props

This solution solved the issue in my instance. In my situation, I was creating dynamic validation rules from an API. This meant it 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 the child field component, rather than the form. Splitting my components into smaller components, then allowed React to re-render less