Skip to content

Conversation

@iagodahlem
Copy link
Member

@iagodahlem iagodahlem commented Nov 4, 2025

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
    • Ensures fetch operations now respect updates to the configured fetcher so requests consistently use the latest fetch behavior.

@changeset-bot
Copy link

changeset-bot bot commented Nov 4, 2025

🦋 Changeset detected

Latest commit: aeeafae

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
Copy link

vercel bot commented Nov 4, 2025

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

Project Deployment Preview Comments Updated (UTC)
clerk-js-sandbox Ready Ready Preview Comment Nov 13, 2025 5:30pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 4, 2025

Walkthrough

Adds a patch changeset and a useEffect to useFetch so the internal fetcherRef.current is updated whenever the fetcher prop changes, ensuring subsequent fetches use the latest function.

Changes

Cohort / File(s) Summary
Changeset entry
.changeset/lucky-lamps-repair.md
Adds a patch release entry for @clerk/clerk-js describing the fix: "Fix useFetch to update fetcher ref".
Hook implementation
packages/clerk-js/src/ui/hooks/useFetch.ts
Adds a useEffect that sets fetcherRef.current = fetcher when the fetcher prop changes, keeping the internal ref in sync.

Sequence Diagram(s)

sequenceDiagram
    participant Component
    participant useFetchHook as useFetch
    participant fetcherRef as fetcherRef

    Component->>useFetchHook: render with fetcher (fn A)
    useFetchHook->>fetcherRef: set current = fn A
    Note over useFetchHook,fetcherRef: on prop change
    Component->>useFetchHook: render with new fetcher (fn B)
    useFetchHook->>fetcherRef: useEffect updates current = fn B
    Component->>useFetchHook: call fetch
    useFetchHook->>fetcherRef: call current() -> fn B
Loading

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Small, localized change in a single hook file.
  • Review attention: ensure effect dependency list is correct and no unintended re-renders; verify types and tests (if any) align.

Poem

🐰 A little ref hopped through the log,
Fetchers came by—some new, some jog.
One tiny effect, a gentle tap,
Now current fetcher’s on the map. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: fixing useFetch to reassign fetcherRef when the fetcher prop changes. It is specific, concise, and directly related to the code modifications shown in the changeset.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ 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

📜 Recent 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 913e749 and aeeafae.

📒 Files selected for processing (2)
  • .changeset/lucky-lamps-repair.md (1 hunks)
  • packages/clerk-js/src/ui/hooks/useFetch.ts (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • .changeset/lucky-lamps-repair.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/clerk-js/src/ui/hooks/useFetch.ts
⏰ 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). (4)
  • GitHub Check: Formatting | Dedupe | Changeset
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: Analyze (javascript-typescript)

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

@pkg-pr-new
Copy link

pkg-pr-new bot commented Nov 4, 2025

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: aeeafae

@blacksmith-sh

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants