Infinite re-render on updating zustand state

[Amansaxena001]

Hi, I am facing a weird issue where Im trying to set a state which is leading to infinite re-renders.

State

  formState: {
    errors: Record<string, any>;
    schema: Schema;
  };

  setFormState: (errors: {
    errors: Record<string, any>;
    schema: Schema;
  }) => void;

Setter fn to update the state

  const handleFormState = useCallback(
    (formData) => { 
      setFormState(formData);
    },
    [setFormState]
  );

zustand version - 4.5.4

I dont understand why its causing infinite loop where its just a simple object based state.

[dbritto-dev]

@Amansaxena001 if you are trying set an state on a useEffect that could be the reason you need consider reentrancy

[Amansaxena001]

Yes Im calling this function in useEffect

  useEffect(() => {
    if (isEmpty(initialValues)) return;
    if (typeof onErrorCapture === "function") {
      onErrorCapture({
        errors,
        schema
      });
    }
  }, [errors, initialValues, onErrorCapture, schema]);

can you give me an example how I can do this alternatively as in my understanding whenever errors change i need to update my state

[dbritto-dev]

@Amansaxena001 you could check if errors is an empty object

  useEffect(() => {
    if (isEmpty(initialValues)) return;
    if (typeof onErrorCapture === "function" && Object.keys(errors).length === 0) {
      onErrorCapture({
        errors,
        schema
      });
    }
  }, [errors, initialValues, onErrorCapture, schema]);

[Amansaxena001]

wont work as i have to set and reset the state whenever there is error or it has been resolved. My main concern was in the notion of is there some case how the zustand handles nested objects

[dbritto-dev]

@Amansaxena001 there's no issue with zustand that could happen with plain useState the issue here is that there's no way to check when to update and any update would trigger a new render making useEffect to rerun the statement which ended up in a infinite loop

[dbritto-dev]

I'd say the implementation is the issue here