React async event handler. The safe way

Question

Imagine a simple react component

const Upload: React.FC = () => {
    const [done, setDone] = useState(false)
    const upload = async () => {
        await doSomeAsyncStuffHere()
        setDone(true)
    }

    if(done) {
        return <div>success</div>
    }

    return (
        <button onClick={upload}>upload</button>
    )
}

It looks fine at first glance. But what if upload function takes a long time to finish? What if user navigates to another view and the component gets unmounted? When the async task finishes will cause a state update on an unmounted component. This is a no-op and a possible memory leak. What should I do to prevent it?

Run it in a useEffect hook with a cleanup function (you shouldn't be causing side effects in a pure function component anyways). This is covered in the hooks FAQ. — Jared Smith
– Jared Smith, Commented Dec 21, 2020 at 22:49

Tholle · Accepted Answer · 2020-12-21 22:48:42Z

2

One way of going about it is to create a ref that you set to false when the component is unmounted, and check against this before setting the result of your asynchronous code in the component state.

Example

const Upload: React.FC = () => {
    const isMounted = useRef(true);
    const [done, setDone] = useState(false)
    const upload = async () => {
        await doSomeAsyncStuffHere()
        
        if (isMounted.current) {
            setDone(true)
        }
    }

    useEffect(() => {
        return () => {
            isMounted.current = false;
        };
    }, []);

    if(done) {
        return <div>success</div>
    }

    return (
        <button onClick={upload}>upload</button>
    )
}

answered Dec 21, 2020 at 22:48

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JCraine Over a year ago

Fortunately it's no longer necessary to set isMounted refs on components. See this comment from Dan Abramov: github.com/facebook/react/pull/22114

Collectives™ on Stack Overflow

React async event handler. The safe way

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related