fix(clerk-react): Initialize isomorphic clerk with useRef (#6024)

Author: panteliselef

.changeset/shaky-ants-raise.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-react': patch
+---
+
+Initialize isomorphic clerk with `useRef`. Avoid memoizing the singleton, instead use a reference to store it, and then destroy it.

packages/react/src/contexts/ClerkContextProvider.tsx

@@ -99,27 +99,26 @@ export function ClerkContextProvider(props: ClerkContextProvider) {
 }
 
 const useLoadedIsomorphicClerk = (options: IsomorphicClerkOptions) => {
- const isomorphicClerk = React.useMemo(() => IsomorphicClerk.getOrCreateInstance(options), []);
- const [clerkStatus, setStatus] = React.useState(isomorphicClerk.status);
+ const isomorphicClerkRef = React.useRef(IsomorphicClerk.getOrCreateInstance(options));
+ const [clerkStatus, setClerkStatus] = React.useState(isomorphicClerkRef.current.status);
 
  React.useEffect(() => {
- void isomorphicClerk.__unstable__updateProps({ appearance: options.appearance });
+ void isomorphicClerkRef.current.__unstable__updateProps({ appearance: options.appearance });
  }, [options.appearance]);
 
  React.useEffect(() => {
- void isomorphicClerk.__unstable__updateProps({ options });
+ void isomorphicClerkRef.current.__unstable__updateProps({ options });
  }, [options.localization]);
 
  React.useEffect(() => {
- isomorphicClerk.on('status', setStatus);
- return () => isomorphicClerk.off('status', setStatus);
- }, [isomorphicClerk]);
-
- React.useEffect(() => {
+ isomorphicClerkRef.current.on('status', setClerkStatus);
  return () => {
+ if (isomorphicClerkRef.current) {
+ isomorphicClerkRef.current.off('status', setClerkStatus);
+ }
  IsomorphicClerk.clearInstance();
  };
  }, []);
 
- return { isomorphicClerk, clerkStatus };
+ return { isomorphicClerk: isomorphicClerkRef.current, clerkStatus };
 };