CODEWITHSUNDEEP
javascriptreactjsrecompose
Legeo
Legeo

Reputation: 792

Maximum update depth exceeded with recompose

i saw several topics talking about this common mistake, but i didn't find nothing related to the use of recompose.

Context

I've this withStateHandler

withStateHandlers(
    {
      bookingValidation: false,
    },
    {
      setBookingValidation: ({ bookingValidation }) => () => ({
        bookingValidation: !bookingValidation,
      }),
    },
  ),

and i've this lifeCycle

lifecycle({
    componentDidMount() {
      const { getFamily } = this.props;
      getFamily();
    },
    componentWillReceiveProps(prevProps) {
      const { formValues } = prevProps;
      const { setBookingValidation } = this.props;
      const {
        locationId,
        specialityId,
        serviceId,
        cancellationDetails,
        personId,
        date,
      } = formValues;

      const allFormValuesSelected = !!(
        locationId &&
        specialityId &&
        serviceId &&
        cancellationDetails &&
        personId &&
        date
      );

      if (allFormValuesSelected) setBookingValidation();
    },
  }),

it's a simple validation, when i've all the selectedValues, the state of bookingValidation will change on true and you will be able to click on a button.

Problem

When you enter in this if if (allFormValuesSelected) setBookingValidation(); the maximum update depth exceeded because of the function setBookingValidation()

Question How can i avoid this behavior ? There is a way to maintain this function ?

Upvotes: 0

Views: 57

Answers (1)

Andriy Budzinskyy
Andriy Budzinskyy

Reputation: 2001

It happens because setBookingValidation() changes property value and calls componentWillReceiveProps. And you got an infinite loop of calls.

If you want to perform form validation, you should move that functionality into a separate withHandlers() method and call onChange event.

Upvotes: 1

Related Questions