React — Uncaught TypeError: destroy is not a function

While experimenting with useEffect hooks in React and React Native, I came across the following error:

Uncaught TypeError: destroy is not a function

and my app was unable to run. After debugging and searching around, I found the cause and how to solve it.

A simplified version of my code looked like this:

The key here is that `myFunction` is `async` and the shorthand arrow function syntax I used.

The reason the simple code above was crashing my app is due to how the useEffect hook, async functions, and the shorthand arrow function syntax work.

One feature of the useEffect hook is a cleanup function. If you return anything from the useEffect hook function, it must be a cleanup function. This function will run when the component unmounts. This can be thought of as roughly equivalent to the componentWillUnmount lifecycle method in class components.

In JavaScript, functions marked with the `async` keyword enable the use of the `await` feature, which lets developers pause the execution of a function while waiting for an asynchronous task to finish. Async functions also always return a Promise; if the function doesn’t return one already, the return value is automatically wrapped in a Promise.

Finally, the shorthand arrow function syntax allows developers to omit the curly braces around the function body, which is useful for simple one-liners. The value of the function body automatically becomes the return value of the arrow function, removing the need of the `return` keyword. This functionality is called Implicit Return.

Now, how do these tidbits come together to cause such a cryptic error? Simply put, the value of myFunction, which is a Promise, becomes the return value of the arrow function in the useEffect hook. Remember that the useEffect hook expects a cleanup function to be returned? A Promise is not a function. so React stumbles and produces the error.

To fix your app, change the useEffect arrow function to add curly braces and remove the Implicit Return, as shown:

Now, the arrow function in the useEffect hook returns `undefined`, which is acceptable and tells React that there is no cleanup function needed. This will solve the problem, but it would be great if React gave a more useful error message when this occurs!