Skip to content

poc(clerk-js): Initialize client more quickly [POC - DO NOT MERGE] #7139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

poc(clerk-js): Initialize client more quickly [POC - DO NOT MERGE] #7139

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/clerk-js/src/core/clerk.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2605,6 +2605,12 @@ export class Clerk implements ClerkInterface {
});

const initClient = async () => {
const jwtInCookie = this.#authService?.getSessionCookie();
if (jwtInCookie) {
const preliminaryClient = createClientFromJwt(jwtInCookie);
this.updateClient(preliminaryClient);
}
Comment on lines +2608 to +2612
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Double client update may cause unnecessary re-renders and state churn.

Calling updateClient at line 2611 with the preliminary client and again at line 2616 with the fetched client will trigger #emit() twice in rapid succession. Each emission notifies all registered listeners, potentially causing double React re-renders and state updates.

Additionally, this new bootstrap path lacks error handling and debug logging, making it difficult to diagnose issues in production.

Consider these improvements:

  1. Suppress emission for preliminary update to avoid double notifications:
 const jwtInCookie = this.#authService?.getSessionCookie();
 if (jwtInCookie) {
   const preliminaryClient = createClientFromJwt(jwtInCookie);
-  this.updateClient(preliminaryClient);
+  // Set client without emitting to avoid double render
+  this.client = preliminaryClient;
+  if (!this.session) {
+    const session = this.#options.selectInitialSession
+      ? this.#options.selectInitialSession(preliminaryClient)
+      : this.#defaultSession(preliminaryClient);
+    this.#setAccessors(session);
+  }
 }
  1. Add error handling and debug logging:
+try {
   const jwtInCookie = this.#authService?.getSessionCookie();
   if (jwtInCookie) {
+    debugLogger.info('Bootstrapping client from session cookie JWT', {}, 'clerk');
     const preliminaryClient = createClientFromJwt(jwtInCookie);
     this.client = preliminaryClient;
     // ... set accessors
   }
+} catch (err) {
+  debugLogger.warn('Failed to bootstrap client from JWT', { error: err }, 'clerk');
+  // Continue with normal fetch flow
+}

Run the following script to verify how often updateClient triggers listener callbacks in the codebase:

🏁 Script executed:

#!/bin/bash
# Search for listener registrations and updateClient calls to assess impact
echo "=== Listener registrations via addListener ==="
rg -n -C2 '\.addListener\(' --type=ts

echo -e "\n=== updateClient call sites ==="
rg -n -C2 'this\.updateClient\(' packages/clerk-js/src/core/clerk.ts

Length of output: 7186

🏁 Script executed:

#!/bin/bash
# Examine updateClient method implementation and #emit() logic
echo "=== updateClient method implementation (lines 2360-2401) ==="
sed -n '2360,2401p' packages/clerk-js/src/core/clerk.ts

echo -e "\n=== Search for #emit() calls within updateClient ==="
sed -n '2360,2401p' packages/clerk-js/src/core/clerk.ts | grep -n "emit"

echo -e "\n=== #emit() method implementation (around lines 2832-2843) ==="
sed -n '2830,2850p' packages/clerk-js/src/core/clerk.ts

echo -e "\n=== Full context of lines 2608-2625 to see both updateClient calls ==="
sed -n '2608,2625p' packages/clerk-js/src/core/clerk.ts

Length of output: 3001

🏁 Script executed:

#!/bin/bash
# Examine updateClient method implementation and #emit() logic
echo "=== updateClient method implementation (lines 2360-2401) ==="
sed -n '2360,2401p' packages/clerk-js/src/core/clerk.ts

echo -e "\n=== Search for #emit() calls within updateClient ==="
sed -n '2360,2401p' packages/clerk-js/src/core/clerk.ts | grep -n "emit"

echo -e "\n=== #emit() method implementation (around lines 2832-2843) ==="
sed -n '2830,2850p' packages/clerk-js/src/core/clerk.ts

echo -e "\n=== Full context of lines 2608-2625 to see both updateClient calls ==="
sed -n '2608,2625p' packages/clerk-js/src/core/clerk.ts

Length of output: 3001

Double client update will trigger unnecessary listener notifications; add preliminary client without emission.

Confirmed: updateClient() always calls this.#emit() (line 2401), which notifies all registered listeners. The code at lines 2611 and 2616 will trigger this twice in sequence, causing React and other framework listeners to update state twice unnecessarily.

Additionally, the new bootstrap path lacks error handling and debug logging, making it difficult to diagnose issues in production.

Suggested improvements:

  1. Suppress emission for preliminary update to avoid double notifications:
 const jwtInCookie = this.#authService?.getSessionCookie();
 if (jwtInCookie) {
   const preliminaryClient = createClientFromJwt(jwtInCookie);
-  this.updateClient(preliminaryClient);
+  // Set client directly without emitting to avoid duplicate listener notifications
+  this.client = preliminaryClient;
+  if (!this.client) {
+    const session = this.#options.selectInitialSession
+      ? this.#options.selectInitialSession(preliminaryClient)
+      : this.#defaultSession(preliminaryClient);
+    this.#setAccessors(session);
+  }
 }
  1. Add error handling and debug logging:
+try {
   const jwtInCookie = this.#authService?.getSessionCookie();
   if (jwtInCookie) {
+    debugLogger.info('Bootstrapping preliminary client from session cookie', {}, 'clerk');
     const preliminaryClient = createClientFromJwt(jwtInCookie);
     this.client = preliminaryClient;
     // ... set accessors
   }
+} catch (err) {
+  debugLogger.warn('Failed to bootstrap preliminary client from JWT', { error: err }, 'clerk');
+  // Continue with normal fetch flow
+}

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In packages/clerk-js/src/core/clerk.ts around lines 2608 to 2612, the current
bootstrap path calls updateClient() twice which always emits listeners and
causes duplicate notifications; change the first/preliminary client assignment
to set the internal client state without calling this.#emit (e.g. a private
setter or a flag to suppress emission) so only the final successful update
triggers listeners, and wrap the bootstrap client creation path in a try/catch
that logs debug information and errors (use existing logging utility or
this.#logger.debug/error) before falling back so failures are observable and do
not crash silently.


return Client.getOrCreateInstance()
.fetch()
.then(res => this.updateClient(res))
Expand Down
Loading