"Uncaught TypeError: destroy is not a function" Error in React-CodePudding

Now I'm building the application using React.js. All pages are working excepting of auth page. After logging successfully, it should bring the user to the home page but it was broken, and showed the blank page. After refreshing the manually, it started to show the home page.

When I checked the application thru development tools in the chrome browser, it says "Uncaught TypeError: destroy is not a function". I attached the code where caused the error.

...
const UnauthedWrapper = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const {
    state: { auth, user },
  } = useContext(AppContext);

  useEffect(() => {
    if (auth && user && user.emailVerified && user.dstoreName) {
      navigate(`/app/overview`);
      return null;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [auth, user]);

  return (
    <>
      {!location.pathname.includes("/auth") ? (
        <Header
          logo="/images/logo.png"
          page="landing"
          hideLogin={process.env.REACT_APP_ENV === "PROD"}
        />
      ) : (
        <Link to="/">
          <img
            src="/images/logo.png"
            alt="logo"
            className="logo ms-4 mt-4"
            width={180}
          />
        </Link>
      )}
     ...

CodePudding user response：

This error occurs because your "destroy" or "componentWillUnmount" returned by the callback in useEffect is not a function:

  useEffect(() => {
    if (auth && user && user.emailVerified && user.dstoreName) {
      navigate(`/app/overview`);
      return null; // NOT A FUNCTION
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [auth, user]);

So you'll have to change that to something that is a function, or don't return there at all.

  useEffect(() => {
    if (auth && user && user.emailVerified && user.dstoreName) {
      navigate(`/app/overview`);
      return () => {}; // no-op
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [auth, user]);

CodePudding user response：

It turns out this almost always happens when you try to return anything from your useEffect hook that is not a function.

Why Doesn’t This Work?

If you return anything from a useEffect function, it must be a function.

useEffect(() => {
    if (auth && user && user.emailVerified && user.dstoreName) {
      navigate(`/app/overview`);
      return null;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [auth, user]);

The Quick Solution

Remove the unnecessary return.

useEffect(() => {
    if (auth && user && user.emailVerified && user.dstoreName) {
      navigate(`/app/overview`);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [auth, user]);

Make sure it has function.

useEffect(() => {
    if (auth && user && user.emailVerified && user.dstoreName) {
      navigate(`/app/overview`);
      return () => {}
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [auth, user]);