fix(shared-ui): use named React hook imports in Account panels

[dsapandora]

Summary

• Fix the web-only crash ReferenceError: useMemo is not defined when opening the Account screen.
• BillingPanel.tsx and ProfilePanel.tsx referenced React hooks through the default React namespace (React.useMemo, React.useState, React.useEffect); under the web Module Federation build (React as a shared singleton) the minifier rewrites that property access into a bare, unbound useMemo/hook reference, crashing the view. VS Code (React bundled directly) was unaffected — hence web-only.
• Switch both panels to named hook imports, matching every other panel in the account module (AccountView, MembersPanel, EnvironmentPanel).

Type

fix

Testing

• Tests added or updated
• Tested locally
• ./builder test passes

Checklist

• Commit messages follow conventional commits
• No secrets or credentials included
• Wiki updated (if applicable)
• Breaking changes documented (if applicable)

Linked Issue

Fixes #1273

Summary by CodeRabbit

• Refactor
  • Internal code improvements to React hook usage in account components. No changes to user-facing functionality.

[github-actions]

🤖 Internal: Discord sync marker

Auto-managed by the Discord notification workflow. Stores the linked Discord message ID. Do not edit or delete.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7d94f39e-a50a-4247-8bda-396db265c68c

📥 Commits

Reviewing files that changed from the base of the PR and between 0683f89 and c3d2444.

📒 Files selected for processing (2)

• packages/shared-ui/src/modules/account/components/BillingPanel.tsx
• packages/shared-ui/src/modules/account/components/ProfilePanel.tsx

---

📝 Walkthrough

Walkthrough

Two account panel components — BillingPanel.tsx and ProfilePanel.tsx — are updated to import React hooks as named bindings (useMemo, useState, useEffect) instead of accessing them through the React namespace. No rendering logic, props, or public API surfaces are changed.

Changes

Named React Hook Imports Fix

Layer / File(s)	Summary
Named hook imports in BillingPanel and ProfilePanel packages/shared-ui/src/modules/account/components/BillingPanel.tsx, packages/shared-ui/src/modules/account/components/ProfilePanel.tsx	BillingPanel adds useMemo to its named React imports and replaces React.useMemo with the bare useMemo call. ProfilePanel replaces its default-only React import with one that also names useState and useEffect, and updates all four hook call sites (editOpen, fields, saving, error, and the resync effect) accordingly.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐇 Two panels once called on React by its name,
The bundler rewrote them — the web was to blame!
Now useMemo, useState, named imports at last,
No more bare references from some minified past.
Hop hop, the Account screen renders just fine~ 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: switching to named React hook imports in Account panels to fix the web-only crash.
Linked Issues check	✅ Passed	The PR addresses all objectives from issue #1273: it fixes the BillingPanel and ProfilePanel by switching from default React namespace hooks to named imports, which resolves the web-only ReferenceError crash.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the two affected panels (BillingPanel and ProfilePanel) by updating hook imports; no unrelated changes are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/account-react-hooks-mf-binding

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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