Skip to content

fix(app-bridge-react): stabilize SaveBar and Modal ref callbacks - #577

Merged
henrytao-me merged 2 commits into
Shopify:mainfrom
HamedFarazi:fix/savebar-ref-callback-loop
Aug 24, 2026
Merged

fix(app-bridge-react): stabilize SaveBar and Modal ref callbacks#577
henrytao-me merged 2 commits into
Shopify:mainfrom
HamedFarazi:fix/savebar-ref-callback-loop

Conversation

@HamedFarazi

Copy link
Copy Markdown
Contributor

Summary

Fixes #565

SaveBar and Modal were creating a new inline ref callback on every render.
React treats changing callback refs as detach/attach operations, causing the
ref callback to run repeatedly and trigger internal state updates.

Changes

  • Replaced inline ref callbacks with memoized useCallback refs
  • Preserved existing forwardedRef behavior for:
    • callback refs
    • object refs
    • unmount cleanup

Validation

  • ✅ pnpm lint
  • ✅ pnpm test
  • ✅ TypeScript diagnostics clean

Only modified:

  • packages/app-bridge-react/src/components/SaveBar.tsx
  • packages/app-bridge-react/src/components/Modal.tsx

@HamedFarazi
HamedFarazi requested a review from a team August 22, 2026 12:38
Changelog CI requires a changeset. Patch bump for Shopify#565.

Assisted-By: devx/35dc5d8f-6f30-4363-8095-9b09c36e51fe
@henrytao-me

Copy link
Copy Markdown
Member

Thanks @HamedFarazi for sending the PR 👍

@henrytao-me
henrytao-me merged commit 7ec9edb into Shopify:main Aug 24, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SaveBar component triggers internal setState loop via inline ref callback

3 participants