React Cleanup async function fetch with hooks

Question

This is in a functional component.

I have a submit() function that looks like so:

  async function handleSubmit(event) {
    event.preventDefault();
    try {
      let resp = await fetch("FOOBAR/BAX", {
        method: 'POST',
        body: JSON.stringify({ /*stuff*/})
      });
      if (resp.ok){
        // yadda yadda yadda
        props.history.push("/"); // navigate
      }
    } 
  }

Now, when I cause navigation to occur I'm getting the dreaded 'Can't perform a React state update on an unmounted component.' error.

So, using effects, how do I make sure this fetch call is cleaned up? All the examples I'm seeing use useEffect to both set up and then cleanup the call (with cleanup function).

It doesn't look like there's any state change in your handleSubmit function. I don't see anything to clean here. Would you care to share more code, maybe on stackblitz? — yonki
– yonki, Commented Jan 4, 2020 at 21:55
@yonki let's say I want to make sure that request is cancelled -- how would I useEffect to do that? — mtyson
– mtyson, Commented Jan 4, 2020 at 22:21
@mtyson I believe @yonki is informing you that the error doesn't match the code you shared. Your handleSubmit function doesn't appear to update state (unless it is hidden within the yadda yadda yadda bit). About using useEffect hook to cancel a fetch request you can use an abort controller with the fetch request. Let us know if you need help with that. In the mean time , as yonki requested, can you share more of the component code or share a link to it in stackblitz or codesandbox? — Drew Reese
– Drew Reese, Commented Jan 4, 2020 at 23:58

Drew Reese · Accepted Answer · 2020-01-05 20:49:23Z

Clean up a fetch request by cancelling on dismount using an abort controller

Factor the fetch request logic out of the handler into the effect hook and use a state hook to trigger the effect to fire. Return the controller's abort function in the effect hook to be called when the component unmounts.

const [body, setBody] = useState('');

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  if (body) {
    fetch("FOOBAR/BAX", {
      method: 'POST',
      body: JSON.stringify(body),
      signal, // add signal to request
    })
    .then(res => {
      setBody(''); // clear request body value
      if (res.ok) props.history.push('/');
    });
  }

  return controller.abort; // return the abort function to be called when component unmounts
}, [body]);

const handleSubmit = (event) => {
  event.preventDefault();
  setBody({ /*stuff*/ }); // set request body value to trigger effect to fetch
};

Here's a codesandbox with this implemented as a react hook, with manual abort and automatic abort on unmounting.

Collectives™ on Stack Overflow

React Cleanup async function fetch with hooks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related