fix(clerk-js): Reassign fetcherRef when fetcher changes

[iagodahlem]

Description

useFetch receives a fetcher function as a parameter, which is assigned to a ref internally. The problem is that when we switch resources, the fetcher function still points to old references. This PR ensures that the fetcherRef always points to the latest fetcher param.

• How to reproduce:
  • Sign in to an app with orgs, and make sure your signed-in user is a member of at least two different orgs.
  • Switch from one org to another to trigger a refetch for the organization roles endpoint
  • Check the network tab. Before the fix, the refetch would point to the previous org ID
  • With the fix, the refetch should point to the correct, last selected organization ID

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

• Bug Fixes
  • Fixed an issue where fetch operations were not properly synchronizing with updated fetcher settings, ensuring that the most current configuration is always used for all requests.

[changeset-bot]

🦋 Changeset detected

Latest commit: 913e749

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Nov 4, 2025 7:22pm

[coderabbitai]

Walkthrough

A patch release for @clerk/clerk-js is introduced to fix the useFetch hook. A useEffect is added to synchronize the fetcherRef with changes to the fetcher prop, ensuring the internal reference always reflects the latest fetcher function.

Changes

Cohort / File(s)	Summary
Changeset entry .changeset/lucky-lamps-repair.md	Declares patch version bump for @clerk/clerk-js with fix for useFetch fetcher ref synchronization
Hook implementation packages/clerk-js/src/ui/hooks/useFetch.ts	Adds useEffect hook to update fetcherRef.current whenever the fetcher prop changes, maintaining sync between the reference and the provided function

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Minimal, localized change affecting a single hook file
• Straightforward useEffect pattern for ref synchronization
• No complex logic or control flow modifications
• Changeset entry is standard declarative metadata

Poem

🐰 A ref that danced with fetchers new,
Now synced up perfectly, tried and true!
One useEffect to bind them tight,
The fetcher's always fresh and bright. ✨

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: it specifies the package (clerk-js), the type of fix, and the core action (reassigning fetcherRef when fetcher changes). This aligns with the changeset and code modifications.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch iago/orgs-950

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7145

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7145

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7145

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7145

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7145

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7145

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7145

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7145

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7145

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7145

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7145

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7145

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7145

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7145

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7145

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7145

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7145

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7145

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7145

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7145

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7145

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7145

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7145

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7145

commit: 913e749