Formik setValues() throws 'Too many re-renders' error

[StephanieRuthJones]

I am trying to use setValues to clear ONLY SOME KEYS in Formik state via the function clearCurrentEntries, but no matter what I do, I get the error `Too many re-renders. React limits the number of renders to prevent an infinite loop.

• How do I clear some values in Formik state, but prevent the app from rerendering too many times and throwing this error?

const Container = () => {
  const emptyObj = {
    first_name: '',
    last_name: '',
    middle_name: '',
  }

  const clearCurrentEntries = (values, setValues) => {
    setValues({ ...values, ...emptyObj })
  }
  const showInput = (values) => {
    const msOptions = ['one', 'two', '']
    const ms = values?.status?.toLowerCase()
    const show = msOptions.every((option) => ms !== option)
    return show
  }

  return 
    <div>
      <Formik
        enabledReinitialize={true}
        initialValues={formStructure}
        onSubmit={handleSubmit}>
        {({ handleChange, handleSubmit, values, setFieldValue, setValues }) => {
          return (
            <Form onSubmit={handleSubmit} >
              <div className="form-content">
                <Form.Group>
                  <Form.Label>Status</Form.Label>
                  <Form.Control
                    as="select"
                    id={'status'}
                    name={'status'}
                    value={values?.status}
                    onChange={handleChange}>
                    <option value="">Select...</option>
                    {statusOptions.map((option) => (
                      <option key={option} value={option}>
                        {option}
                      </option>
                    ))}
                  </Form.Control>
                </Form.Group>
                {showInput(values) ? (
                  <CurrentInputs />
                ) : (
                  clearCurrentEntries(values, setValues)
                )}
            </Form>
          )
        }}
      </Formik>
    </div>
  )
}

export default Container

[johnrom]

It's pretty hard to get that error in React without actually having an infinite loop. The depth that is required to get to TOO_MANY_RENDERS is pretty deep. Therefore, it's fair to assume there is a bug leading to an infinite loop in your code.

It would be really easy to prove this in a codesandbox. However, if we combine all the code running on each render, we should be able to see what's going wrong:

    // this is basically what happens on every render
    // valid "ms" options
    const msOptions = ['one', 'two', '']
    // selected "ms" option
    const ms = values?.status?.toLowerCase()
    // this is extremely hard to understand, double negatives all over the place
    // I think it should be like `if (msOptions.contains(ms))` but I have read it 15 times and still am not sure I understand the intent
    if (!msOptions.every((option) => ms !== option)) {
      setValues({ 
        ...values,
        first_name: '',
        last_name: '',
        middle_name: '',
    })
  }

Because setValues does not change values.status, any time the condition is true, it will continue to be true in an infinite loop. You should reset values.status to something that would cause this to no longer be true. I think that means setting it to 'one', 'two', or '', but honestly I still don't know if I get the if statement.

I'd recommend breaking out some of the complex functionality into a function with a name which describes what you're trying to achieve, like, if (!statusIsDefault(values)) { }, if only for future you to understand later.