spike: batch state updates in setActive #6905
Conversation
🦋 Changeset detectedLatest commit: bfbb8b0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds two internal hooks (__internal_startTransition and __internal_setResources), makes Clerk navigation transition-aware, exposes the startTransition hook via Next.js provider, adopts deferred rendering in React context, updates types, and adds a changeset marking minor bumps for four packages. Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant NextProvider as Next.js ClerkProvider
participant ClerkCore as Clerk (Core)
participant Router as Router/Nav
participant ReactCtx as React Context
App->>NextProvider: render with props
NextProvider-->>ClerkCore: props incl. __internal_startTransition
ClerkCore->>ClerkCore: setActive(...)
note right of ClerkCore: create navigatePromise (deferred)
alt __internal_startTransition provided
ClerkCore->>ClerkCore: __internal_startTransition(() => navigate)
ClerkCore->>Router: navigate (task/redirect)
Router-->>ClerkCore: navigation complete
else fallback
ClerkCore->>Router: await navigate directly
Router-->>ClerkCore: navigation complete
end
ClerkCore->>ClerkCore: await navigatePromise.promise
ClerkCore-->>ReactCtx: emit updated state
ReactCtx->>ReactCtx: useDeferredValue(deferredState)
ReactCtx-->>App: render with deferred state
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Comment |
|
!snapshot |
|
Hey @panteliselef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact |
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/clerk-js/src/core/clerk.ts (1)
1418-1466: Fix transitionSafe to resolve navigatePromise in all cases.When
__internal_startTransitionisn’t provided (the default today),transitionSafeawaits the navigation but never resolvesnavigatePromise, soawait navigatePromise.promiseat the end ofsetActivehangs forever. Even when a transition handler exists we never callthis.__internal_startTransition, so the hook you just added can’t participate. Resolve/rejectnavigatePromisein both paths and delegate tothis.__internal_startTransitionwhen available.Here’s a concrete fix:
- const navigatePromise = createDeferredPromise(); - - const transitionSafe = async (promise: Promise<unknown> | unknown): Promise<void> => { - if (this.#options.__internal_startTransition) { - void Promise.resolve(promise).then(navigatePromise.resolve); - } else { - await promise; - } - }; + const navigatePromise = createDeferredPromise(); + + const transitionSafe = async (promise: Promise<unknown> | unknown): Promise<void> => { + if (this.#options.__internal_startTransition) { + this.__internal_startTransition(() => + Promise.resolve(promise).then(navigatePromise.resolve, navigatePromise.reject), + ); + return; + } + + try { + await promise; + navigatePromise.resolve(); + } catch (err) { + navigatePromise.reject(err); + throw err; + } + };
🧹 Nitpick comments (3)
.changeset/spotty-shrimps-rule.md (1)
8-8: Replace the placeholder description.The release note currently just says “wip”. Please swap this for a short summary of the user-visible change before shipping.
packages/clerk-js/src/core/clerk.ts (2)
1490-1494: Remove debug logging from production code.
console.log('setActive done')will spam consumer consoles. Please drop the debugging log before shipping.
2880-2885: Remove debug logging from production code.
console.log('setTransitiveState')shouldn’t ship in the bundle; please delete it.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
.changeset/spotty-shrimps-rule.md(1 hunks)packages/clerk-js/src/core/clerk.ts(9 hunks)packages/nextjs/src/app-router/client/ClerkProvider.tsx(1 hunks)packages/react/src/contexts/ClerkContextProvider.tsx(2 hunks)packages/types/src/clerk.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
.changeset/**
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/spotty-shrimps-rule.md
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/types/src/clerk.tspackages/react/src/contexts/ClerkContextProvider.tsxpackages/clerk-js/src/core/clerk.tspackages/nextjs/src/app-router/client/ClerkProvider.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/types/src/clerk.tspackages/react/src/contexts/ClerkContextProvider.tsxpackages/clerk-js/src/core/clerk.tspackages/nextjs/src/app-router/client/ClerkProvider.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/types/src/clerk.tspackages/react/src/contexts/ClerkContextProvider.tsxpackages/clerk-js/src/core/clerk.tspackages/nextjs/src/app-router/client/ClerkProvider.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/types/src/clerk.tspackages/react/src/contexts/ClerkContextProvider.tsxpackages/clerk-js/src/core/clerk.tspackages/nextjs/src/app-router/client/ClerkProvider.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/types/src/clerk.tspackages/react/src/contexts/ClerkContextProvider.tsxpackages/clerk-js/src/core/clerk.tspackages/nextjs/src/app-router/client/ClerkProvider.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/types/src/clerk.tspackages/react/src/contexts/ClerkContextProvider.tsxpackages/clerk-js/src/core/clerk.tspackages/nextjs/src/app-router/client/ClerkProvider.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/react/src/contexts/ClerkContextProvider.tsxpackages/nextjs/src/app-router/client/ClerkProvider.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/react/src/contexts/ClerkContextProvider.tsxpackages/nextjs/src/app-router/client/ClerkProvider.tsx
🧬 Code graph analysis (2)
packages/react/src/contexts/ClerkContextProvider.tsx (1)
packages/types/src/client.ts (1)
ClientResource(8-33)
packages/clerk-js/src/core/clerk.ts (3)
packages/types/src/clerk.ts (2)
ListenerCallback(121-121)Resources(1125-1130)packages/shared/src/utils/createDeferredPromise.ts (1)
createDeferredPromise(11-19)packages/clerk-js/src/utils/url.ts (1)
buildURL(84-158)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
|
!snapshot |
|
Hey @panteliselef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/react/src/contexts/ClerkContextProvider.tsx (2)
32-40: Review the deferred state pattern and remove commented code.The use of
useDeferredValueto defer state updates is appropriate for batching updates during transitions. However:
- The commented line 40 appears to be leftover experimentation code. If not needed for the spike documentation, consider removing it.
- Verify that the immediate
updatedState→ deferredstatepattern handles the initial render correctly (it should, asuseDeferredValuereturns the current value on first render).Consider removing the commented line if it's not documenting a specific trade-off:
const state = useDeferredValue(updatedState); -// const state = updatedState || defaultState; -
10-127: Verify integration withstartTransitionandsetActiveAPI.The PR title mentions "batch state updates in setActive," but this file doesn't show changes to a
setActivemethod. The deferred values introduced here will batch UI updates, but to fully leverage React's transition API:
- Verify that state updates triggered by
setActive(likely inIsomorphicClerkor related files) are wrapped instartTransition.- Ensure the commented
__internal_setResourceshook (line 29) integrates with the transition mechanism when implemented.- Test that high-priority updates (e.g., user input) are not delayed by the deferred state.
Since this is a spike PR, document findings about:
- Performance impact of double-deferring
derivedState- Whether
startTransitionwrapping is needed insetActiveor ifuseDeferredValuealone is sufficient- Any observable differences in rendering behavior with these changes
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/react/src/contexts/ClerkContextProvider.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/react/src/contexts/ClerkContextProvider.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/react/src/contexts/ClerkContextProvider.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/react/src/contexts/ClerkContextProvider.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/react/src/contexts/ClerkContextProvider.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/react/src/contexts/ClerkContextProvider.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/react/src/contexts/ClerkContextProvider.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/react/src/contexts/ClerkContextProvider.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/react/src/contexts/ClerkContextProvider.tsx
🧬 Code graph analysis (1)
packages/react/src/contexts/ClerkContextProvider.tsx (2)
packages/types/src/client.ts (1)
ClientResource(8-33)packages/shared/src/deriveState.ts (1)
deriveState(15-20)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Packages
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (4)
packages/react/src/contexts/ClerkContextProvider.tsx (4)
10-10: LGTM! useDeferredValue import is appropriate.The import of
useDeferredValuesupports the deferred rendering pattern introduced in this change.
27-30: Clarify the commented-out__internal_setResourcesline.The commented line suggests a future integration point for internal resource updates. Since this is a spike PR, clarify whether:
- This should remain as a TODO marker for the final implementation
- It should be removed if not part of the current spike scope
- It needs to be activated for testing the batch update behavior
49-50: Verify the double-deferred pattern forderivedState.Since
stateis already deferred viauseDeferredValue(updatedState), and_derivedStateis computed from that deferredstate, wrapping_derivedStatewith anotheruseDeferredValuecreates a double-deferral:updatedState → [defer] → state → [derive] → _derivedState → [defer] → derivedStateThis means
derivedStatewill lag behind even the already-deferredstate, potentially causing:
- Stale or inconsistent values across renders
- Multiple deferred updates instead of batched updates
Consider whether:
- Only
updatedStateshould be deferred (and_derivedStatecomputed from deferred state without additional deferral), or- This double-defer is intentional for specific UX reasons (e.g., further delaying derived updates during high-priority transitions)
If the double-defer is unintentional, apply this diff:
const _derivedState = deriveState(clerk.loaded, state, initialState); -const derivedState = useDeferredValue(_derivedState); +const derivedState = _derivedState;
126-127: LGTM! Deferred clerkStatus is consistent with the batch update pattern.The deferred
clerkStatusaligns with the overall goal of batching state updates during transitions. This ensures the Clerk context doesn't trigger immediate re-renders.
| React.useEffect(() => { | ||
| return clerk.addListener(e => setState({ ...e })); | ||
| return clerk.addListener(e => { | ||
| console.log('[Listener]', e.organization?.id); | ||
| setState(e); | ||
| }); | ||
| }, []); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove console.log before merging or gate it for development.
The console.log statement is useful for spike/debugging but should be removed or conditionally enabled for production code.
Apply this diff to remove the debug log:
React.useEffect(() => {
return clerk.addListener(e => {
- console.log('[Listener]', e.organization?.id);
setState(e);
});
}, []);Alternatively, gate it with a development flag if logging is needed for debugging:
React.useEffect(() => {
return clerk.addListener(e => {
- console.log('[Listener]', e.organization?.id);
+ if (process.env.NODE_ENV === 'development') {
+ console.log('[Listener]', e.organization?.id);
+ }
setState(e);
});
}, []);🤖 Prompt for AI Agents
In packages/react/src/contexts/ClerkContextProvider.tsx around lines 42 to 47,
remove the stray console.log('[Listener]', e.organization?.id) or gate it behind
a development-only check; either delete the console.log line entirely or wrap it
in a conditional such as if (process.env.NODE_ENV === 'development') { /* log */
} (or use the project’s __DEV__/isDevelopment flag) so no debug logging is
emitted in production.
Description
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
Refactor
Chores