If you are trying to add field validation to React Redux Form, however, when you come to run your page, it throws an errors and goes into an infinite loop, then this tutorial may be able to help you.
First, I'm assuming you're using React Forms Field validations and that you have some code that looks similar to this:
Let's try to understand the problem of why an infinite loop error might occur. 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. Usually, this happens as the state is being changed in an inefficient way.
One way of building inefficient React components is to not pass props correctly into your components. In the example above, I'm passing an array containing functions into the validate props. As I'm passing an array of functions each time rerender is called in any parent component, the Field component will rerender. If you have a form with 20 elements, something as simple as passing the wrong type of prop can cause all sort of unwanted re-renders.
If it's possible in your situation, ensure you pass in an object whose reference will not change. This simple change will likely resolve your infinite loop error. You can look at the redux form example: to see how they pass props around. 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
Higher Order
Instead of creating a generic component, you could create more specific components that avoid the need to pass functions around as much. Take the example below:
In this snippet, the validators are defined inside the component rather than being passed in. These are passed directly into validate(). When a user changes input in a different element, this component will not be re-calculated. This approach prevents React from constantly having to re-paint components that have not changed. Wrapping the Field component with a finer granulated component can prevent state changes. Use Higher-order components to achieve this whenever you can!
Are You Using PureComponent?
In this example, the validators have been defined outside the component as a function. These references are passed directly into validate() inside an array! On each re-render, the validate prop is being treated by React as constantly changing. The whole form needs to be re-calculated each time someone types a single character in any form element. This is a massive performance drain.
Are You Using PureComponent?
Pure component allows React to try and optimize the page rendering by doing a shallow copy comparison 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 the compared yourself, like this example:
Or on the props:
These two fixes (HOC and manual prop checking) solved my performance issues and I hope it solves yours. Happy Coding 🤘
