Dispatching action inside isError causing infinite rendering of isError

[danieladamsjs]

I'm using React-Query with Redux Toolkit and Axios

I'm trying to record the number of failed login attempts to the global state (redux) so I can show a recaptcha after XY failed login attempts.

Using a useMutation hook to sign the user in. When there is a login error I want to dispatch an action to increment the number of failed login attempts in redux.

Putting the dispatch inside isError is causing isError and the dispatch call to be infinitely.

When the dispatch call is removed from isError, then isError is only called once as expected.

I've created a sandbox and still cannot get a dispatch to be ran inside an isError

Codesandbox sample

[karol-janik]

Instead of calling useDispatch in if with isError, pass it to onError callback.

const { mutate, data, error, isError, isSuccess } = useMutation( (val) => signIn(val), { onError: () => dispatch(addAttempt()) } );

The reason: reference of data changes ->useSelector function returns you a new value-> re-renders the component->isError is still true -> dispatch is called agin 🔄

onError is called once - after mutation return error.

There is also reset function from useMutation - but I don't test it in this case.

[TkDodo]

also, please note that you cannot call dispatch just in an if in the render function. Render functions need to be pure, so if you want to dispatch, you have to do in a useEffect or, as suggested, in the onError callback of react-query.