React Hook useCallback has a missing dependency or Maximum update depth exceeded

Question

In a useEffect , I check if an object exists,

if the object exists I call a useCallBack function which will fill in the values of a form via formik

Here is the problem :

1- if I do not fill in the formDef in the dependencies of useCallBack, I get a message telling me

 React Hook useCallback has a missing dependency: 'formDef'.

and in this case I cannot build my branch following this error.

2 - if I fill in the formDef in the dependencies of useCallBack, the function loops infinitely, with the following error message:

 Warning: Maximum update depth exceeded. This can happen when a component calls
 setState inside useEffect, but useEffect either doesn't have a dependency array,
`enter code here` or one of the dependencies changes on every render.

useCallBack:

 const InitialiseTypeStorage = useCallback(() => {
   if (type) {
    for (const [key, value] of Object.entries(type.type)) {
      formDef.setFieldValue(key, value);
      }
   }
 }, [type]);

useFormik :

 const formDef = useFormik({
   initialValues: formTypedValues,
   validateOnMount: true,
   validationSchema,
   enableReinitialize: true,
   validateOnChange: true,
   onSubmit: (values) => handleMappingType(values),
 });

useEffect :

  useEffect(() => {
   InitialiseTypeStorage();
  }, [InitialiseTypeStorage]);

Is there a solution to avoid these two error messages?

If you are sure of what you are doing you can add an ignore to the rule — phoenixstudio, Mar 09 '22 at 14:43

score 1 · Accepted Answer · answered Aug 16 '23 at 10:04

In this case, simply destructure the formik can get rid of the warning.

 const { setFieldValue } = formDef;

 const InitialiseTypeStorage = useCallback(() => {
   if (type) {
    for (const [key, value] of Object.entries(type.type)) {
      setFieldValue(key, value);
      }
   }
 }, [type, setFieldValue]);

React Hook useCallback has a missing dependency or Maximum update depth exceeded

1 Answers1