React and firebase adding document to collection issue - Warning: Can't perform a React state update on an unmounted component

Question

I'm trying to add a document to a firebase collection. It works and adds the document but i get the following warning in my react console - Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

This is the utility function I wrote

export const addDocument = async (title) => {
    const collectionRef = firestore.collection('collections')
    const newDocRef = collectionRef.doc()
    const snapshot = await newDocRef.get()
    if(!snapshot.exists) {
        try {
            await newDocRef.set({
                title,
                items: []
            })
        } catch (e) {
            console.error('Error creating document.', e.message)
        }
    }
}

This is the component that i'm calling the utility in and is giving me the error

const AdminPage = () => {

    const handleSubmit = () => {
        addDocument('hat')
    }
    return (
        <div>
                <button onClick={handleSubmit}>Add Collection</button>
        </div>
    )
}

All my imports and exports are fine i've just omitted it to make things more concise.

Does this answer your question? [Can't perform a React state update on an unmounted component](https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component) — Kundan, Jun 04 '20 at 01:23
I had checked this out previously but all the simple solutions didn't work. The other solutions are too unnecessarily complex in my opinion and would make my code less useable(considering it's just an admin pade it won't affect the end user). I'm just trying to figure out what the underlying solution may be. In my opinion when I update my firebase it affects my redux store somehow(not sure tho just a theory). If i figure it out i'll be the first to inform. — Ziyak, Jun 04 '20 at 13:18

score 0 · Accepted Answer · answered Jun 04 '20 at 13:27

The code contains async operations so you should implement method: componentWillUnmount

As your code awaits for all async operation (get and set only I think) it should not be a case in your example. This is just a warning and according to my understanding it is showing that async operation may end when object is already destroyed.

Passing some interesting articles and questions: one, two, three, four

if you need more there is tones of articles over the internet. I hope it will help!

React and firebase adding document to collection issue - Warning: Can't perform a React state update on an unmounted component

1 Answers1