Redux-Toolkit dispatch in useEffect hook results in an infinite loop - reactjs

Question

Problem
I use useMuation from react-query to do post requests and get the user info from JSON and then try to store it to my redux store using useEffect according to the status given by react-query useMutation hook which is success. The problem rises in this status. all info is successfully stored in the redux store as you can see in the picture, but it causes infinite loop.
I tried to put an empty dependency array and even put userData?.data?.data?.user?.name and userData?.data?.token instead of userData but still the same.
Error
Store
userSlice.ts
import { createSlice, configureStore, PayloadAction } from "#reduxjs/toolkit";
type initialState = {
user: string;
dashboardIndex: number;
theme: string;
token: string;
isLoggedIn: boolean;
};
const initialState: initialState = {
user: "",
dashboardIndex: 0,
theme: "themeLight",
token: "",
isLoggedIn: false,
};
const userSlice = createSlice({
name: "user",
initialState: initialState,
reducers: {
updateUser(state, action: PayloadAction<string>) {
state.user = action.payload;
},
updateDashboardIndex(state, action: PayloadAction<number>) {
state.dashboardIndex = action.payload;
},
updateTheme(state, action: PayloadAction<string>) {
state.theme = action.payload;
},
updateToken(state, action: PayloadAction<string>) {
state.token = action.payload;
},
updateIsLoggedIn(state, action: PayloadAction<boolean>) {
state.isLoggedIn = action.payload;
},
reset: () => initialState,
},
});
// ...
Login.tsx
const LoginComponents = () => {
let navigate = useNavigate();
const [loginObject, setLoginOject] = useState<loginObjectType>({
email: "",
password: "",
});
const {
mutate,
error,
isError,
isSuccess,
data: userData,
} = useQueryMutationInvalidateHooksPost("api/v1/users/login");
const dispatch = useAppDispatch();
...
// Signin process handler
useEffect(() => {
console.log("hi");
if (isSuccess) {
if (userData) {
dispatch(usersActions.updateUser(userData?.data?.data?.user?.name));
dispatch(usersActions.updateToken(userData?.data?.token));
dispatch(usersActions.updateIsLoggedIn(!!userData?.data?.token));
alert(
`Succeeded in login. Welcome ${userData?.data?.data?.user?.name}!`
);
navigate("/home");
}
}
if (isError) {
if (error instanceof AxiosError) {
alert(error?.response?.data?.message);
}
}
}, [navigate, error, isSuccess, isError, userData, dispatch]);
// Button functions
const submitHandler = async (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
event.preventDefault();
if (!loginObject?.email || !loginObject?.password) {
alert("Please input all required fields.");
} else if (loginObject?.email && loginObject.password) {
// fetching data
const temp = {
...loginObject,
};
mutate(temp);
}
};

Answer 1

I would suggest to use useEffect hook only for initializations and not as a handler.
To react on mutation success or error use the mutation as follows.
mutate(temp, {
onSuccess: (data, variables, context) => {
// add your success handling logic here
},
onError: (error, variables, context) => {
// Add your error handling logic here
},
onSettled: (data, error, variables, context) => {
// Code that must run, irrelevant of success or error, should be added here.
},
})
This way you will get rid of your Signin process handler useeffect which will remove your looping logic.