addListener method does not return UnsubscribeCallback

hlibowski commented 1 year ago

[x] Review the documentation: https://clerk.com/docs
[x] Search for existing issues: https://github.com/clerkinc/javascript/issues
[x] Go through package changelog files.
[x] Provide the Frontend API key from your application dashboard. pk_test_cmVhbC10b3VjYW4tOTAuY2xlcmsuYWNjb3VudHMuZGV2JA

Package + Version

[x] @clerk/clerk-react
[x] @clerk/remix
[x] @clerk/types

Dependencies + versions

"dependencies": {
    "@clerk/clerk-sdk-node": "^4.10.12",
    "@clerk/remix": "^2.6.13",
    "@headlessui/react": "^1.7.14",
    "@heroicons/react": "^2.0.14",
    "@prisma/client": "^4.10.0",
    "@remix-run/node": "^1.12.0",
    "@remix-run/react": "^1.12.0",
    "@remix-run/serve": "^1.12.0",
    "@sentry/remix": "^7.43.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remix-forms": "^1.5.2",
    "remix-utils": "^6.1.0",
  },
  "devDependencies": {
    "@remix-run/dev": "^1.12.0",
    "@remix-run/eslint-config": "^1.12.0",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/cypress": "^9.0.0",
    "@types/lodash": "^4.14.194",
    "@types/node": "^18.13.0",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.8",
    "concurrently": "^7.6.0",
    "cypress": "^12.15.0",
    "esbuild": "^0.17.16",
    "eslint": "^8.27.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.8.6",
    "prettier-plugin-tailwindcss": "^0.2.5",
    "prisma": "^4.10.0",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.2.0",
    "typescript": "^4.8.4"
  }

Description

addListener method from useClerk hook does not return unsubscribeCallback as it's described in the doc, so it's not possible to unmount listener and it leads to the listeners duplication.

Code snippet:

import { SignUp, useClerk } from "@clerk/remix";
import { useEffect } from "react";

export default function SignUpPage() {
  const { loaded, addListener } = useClerk();

  useEffect(() => {
    if (loaded) {
      const unsubscribeCallback = addListener((event) =>
        // Some code logic
      );

      // Destroy callback on unmount
      return () => {
        // Currently, clerk has a bug and unsubscribeCallback is always undefined
        if (unsubscribeCallback) unsubscribeCallback();
      };
    }
  }, [loaded, addListener]);

  return <SignUp />;
}

dimkl commented 1 year ago

Hello @hlibowski I have opened a PR to tackle this issue, thank you for reporting this.

dimkl commented 1 year ago

Closing this as completed. The fix is merged and will be available in the next @clerk/clerk-react release.

clerk-cookie commented 2 months ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

clerk / javascript