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

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?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source