1

I have basically this button that dispatch an request and I'm seting load to false when the request is done, and i'm getting this common problem of react can't handle the state when the component is unmounted. I tried to set an _isMounted state using useRef hooks like in this similar problem Cleanup memory leaks on an Unmounted Component in React Hooks but it didnt work.

Here's the function when pressing the button

const handleSubmit = useCallback(
        async e => {
          e.preventDefault()
    
          try {
            setLoading(true)
    
            if (!email || !password) {
              alert('warning', {
                message: 'Ops...',
                description: 'Preencha email e senha para continuar.',
              })
    
              return
            }
    
            const data = {
              email,
              password,
            }
    
            const { setToken } = SessionActions
            const { setCustomer } = CustomerActions
    
            const request = await api.post('/sessions', data)
    
            const { token } = request.headers
            const { customer } = request.data
    
            alert('success', {
              message: 'Seja bem-vindo ao GCM VIP!',
            })
    
            dispatch(setCustomer(customer))
            dispatch(setToken(token))
          } catch (err) {
            alert('error', {
              message: 'Ops...',
              description:
                'Ocorreu algum problema, entre em contato com o suporte.',
            })
          } finally {
            setLoading(false)
          }
        },
        [email, password, dispatch],
      )

Here's the button itself

<Button
            data-testid="submit"
            id="submit"
            type="primary"
            size="large"
            htmlType="submit"
            loading={loading}
          >
            Enter
          </Button>
jarwin
  • 628
  • 2
  • 10
  • 26

0 Answers0