React - Error: Maximum update depth exceeded - useReducer - reactjs

Question

I'm facing an error:
react-dom.development.js:23093 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
I understand that the problem may be due to the fact that I'm calling the checkError and validationPassed functions that modify the state through the useReducer, within the checkValidations function that is called through the useEffect hook, but I don't know how to solve it
The code is as:
interface ValidationField {
errorMessage?: string;
focused: boolean;
hasError: boolean;
}
interface ClientEditorState {
client: Client;
validations: { [key in keyof Client]: ValidationField };
}
enum clientEditorActions {
UPDATE_ENTITY = 'CLIENT_EDITOR/UPDATE_ENTITY',
UPDATE_FOCUSED = 'CLIENT_EDITOR/UPDATE_FOCUSED',
VALIDATION_ERROR = 'CLIENT_EDITOR/VALIDATION_ERROR',
VALIDATION_PASSED = 'CLIENT_EDITOR/VALIDATION_PASSED',
}
interface UpdateEntityAction extends Action<typeof clientEditorActions.UPDATE_ENTITY> {
name: string;
value: string | boolean;
}
interface UpdateFocusedAction extends Action<typeof clientEditorActions.UPDATE_FOCUSED> {
name: string;
}
interface ValidationErrorAction extends Action<typeof clientEditorActions.VALIDATION_ERROR> {
message: string;
name: string;
}
interface ValidationPassedAction extends Action<typeof clientEditorActions.VALIDATION_PASSED> {
name: string;
}
type ClientEditorActions = UpdateEntityAction | UpdateFocusedAction | ValidationErrorAction | ValidationPassedAction;
const clientReducer: Reducer<ClientEditorState, ClientEditorActions> = (prevState, action) => {
switch (action.type) {
case clientEditorActions.UPDATE_ENTITY:
const clientUpdated = _cloneDeep(prevState || ({} as Client));
_set(clientUpdated, `client.${action.name}`, action.value);
return clientUpdated;
case clientEditorActions.UPDATE_FOCUSED:
const validationField = _cloneDeep(prevState);
_set(validationField, `validations.${action.name}.focused`, true);
return validationField;
case clientEditorActions.VALIDATION_ERROR:
const errorField = _cloneDeep(prevState);
_set(errorField, `validations.${action.name}.hasError`, true);
_set(errorField, `validations.${action.name}.errorMessage`, action.message);
return errorField;
case clientEditorActions.VALIDATION_PASSED:
const passed = _cloneDeep(prevState);
_set(passed, `validations.${action.name}.hasError`, false);
_set(passed, `validations.${action.name}.errorMessage`, undefined);
return passed;
default:
return prevState;
}
};
...
const getInitialState = (): ClientEditorState => ({
client: entity as Client,
validations: {
firstName: {
focused: false,
hasError: false,
},
},
});
const [state, clientDispatch] = useReducer(clientReducer, getInitialState());
const checkError = useCallback((name: string, message: string) => {
clientDispatch({
type: clientEditorActions.VALIDATION_ERROR,
name,
message,
});
}, []);
const validationPassed = useCallback((name: string) => {
clientDispatch({
type: clientEditorActions.VALIDATION_PASSED,
name,
});
}, []);
const checkValidations = useCallback(
(c: Client) => {
let validation = false;
const { firstName } = state.validations;
if (!c.firstName && firstName.focused) {
validation = false;
checkError('firstName', f('client.requiredFieldClient'));
} else {
validation = true;
validationPassed('firstName');
}
},
[checkError, f, state.validations, validationPassed],
);
const [clientUpdateHandler] = useDebouncedCallback((clientUpdated: Client) => {
dispatch(updateEntityEditor(clientUpdated));
}, 800);
useEffect(() => {
if (!_isEqual(state.client, entity)) {
clientUpdateHandler(state.client as Client);
}
const { firstName } = state.validations;
if (firstName.focused) checkValidations(state.client);
}, [checkValidations, clientUpdateHandler, entity, state.client, state.validations]);

Answer 1

I understand that the problem may be due to the fact that I'm calling the checkError and validationPassed functions that modify the state through the useReducer, within the checkValidations function that is called through the useEffect hook
Yeah, exactly. Try to reduce your dependencies in the useEffect and the associated functions in useCallback. Any one of these changing will cause the useEffect to rerun.
Back to the question, your useEffect currently depends on state.validations. So whenever state.validations changes the useEffect will rerun. Consider doing
const { firstName } = state.validations;
outside the useEffect and the checkValidations callback. This will stop it from rerunning every time state.validations changes.