[React Doctor] prefer-use-sync-external-store: useState "activeTab" is synchronized with an external store via useEffect — r... (2 occurrences)

[canbo206]

…n tab components (fixes #27946)

Purpose

Replaces the manual useState + useEffect hash-change listener pattern with useSyncExternalStore in ConsoleSettingsTabs and SystemSettingsTabs. This resolves a React Doctor prefer-use-sync-external-store warning and avoids potential tearing during concurrent renders, since the active tab is now derived directly from the URL hash via React's render/commit cycle instead of being manually synced through a side effect.

No behavioral or visual changes — tab switching and URL hash syncing work exactly as before.

Related Issues

• Fixes [React Doctor] prefer-use-sync-external-store: useState "activeTab" is synchronized with an external store via useEffect — r... (2 occurrences) product-is#27946

Related PRs

• N/A

Checklist

• e2e cypress tests locally verified. (for internal contributers)
• Manual test round performed and verified.
• UX/UI review done on the final implementation.
• Documentation provided. (Add links if there are any)
• Relevant backend changes deployed and verified
• Unit tests provided. (Add links if there are any)
• Integration tests provided. (Add links if there are any)

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines
• Ran FindSecurityBugs plugin and verified report
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets

Developer Checklist (Mandatory)

• Complete the Developer Checklist in the related product-is issue to track any behavioral change or migration impact.

[coderabbitai]

Warning

Review limit reached

@canbo206, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 5 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: a9f15218-a129-4263-966c-0ca49bd69a67

📥 Commits

Reviewing files that changed from the base of the PR and between dbe1fac and 13c4f37.

📒 Files selected for processing (2)

• features/admin.console-settings.v1/components/console-settings-tabs.tsx
• features/admin.tenants.v1/components/system-settings/system-settings-tabs.tsx

📝 Walkthrough

Walkthrough

Changes

Hash-based tab subscription

Layer / File(s)	Summary
External-store tab state features/admin.console-settings.v1/components/console-settings-tabs.tsx, features/admin.tenants.v1/components/system-settings/system-settings-tabs.tsx	Both components replace useState and useEffect hash handling with typed, memoized hashchange subscriptions and useSyncExternalStore-derived active tabs.

Suggested reviewers: hwupathum

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error)

Check name	Status	Explanation	Resolution
Changeset Required	❌ Error	The commit changes two feature files but adds no .changeset/*.md file, so the required changeset is missing.	Add a new non-README .changeset Markdown file covering the changed packages (including @wso2is/console and @wso2is/myaccount or @wso2is/identity-apps-core as applicable) with the correct version bump.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is clearly related to the main change: replacing useEffect-based hash syncing with useSyncExternalStore.
Description check	✅ Passed	The description follows the required template and includes purpose, related issue, related PRs, and checklist items.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

• 🛠️ create changeset

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

features/admin.console-settings.v1/components/console-settings-tabs.tsx (1)

203-204: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Move type aliases outside the component function.

While TypeScript erases types during compilation so there is no runtime penalty, defining type aliases inside a component function clutters the runtime logic block and is considered atypical styling. Consider moving SubscribeCallback and UnsubscribeFunction outside the component scope.

• features/admin.console-settings.v1/components/console-settings-tabs.tsx#L203-L204: Move the type definitions above the ConsoleSettingsTabs component definition.
• features/admin.tenants.v1/components/system-settings/system-settings-tabs.tsx#L118-L119: Move the type definitions above the SystemSettingsTabs component definition.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@features/admin.console-settings.v1/components/console-settings-tabs.tsx`
around lines 203 - 204, Move the SubscribeCallback and UnsubscribeFunction type
aliases above the ConsoleSettingsTabs component definition in
features/admin.console-settings.v1/components/console-settings-tabs.tsx#L203-L204
and above the SystemSettingsTabs component definition in
features/admin.tenants.v1/components/system-settings/system-settings-tabs.tsx#L118-L119,
keeping their definitions unchanged and outside the component bodies.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@features/admin.console-settings.v1/components/console-settings-tabs.tsx`:
- Around line 203-204: Move the SubscribeCallback and UnsubscribeFunction type
aliases above the ConsoleSettingsTabs component definition in
features/admin.console-settings.v1/components/console-settings-tabs.tsx#L203-L204
and above the SystemSettingsTabs component definition in
features/admin.tenants.v1/components/system-settings/system-settings-tabs.tsx#L118-L119,
keeping their definitions unchanged and outside the component bodies.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: f83b6221-b006-4fb9-bf90-02c429a27258

📥 Commits

Reviewing files that changed from the base of the PR and between 504e5e7 and dbe1fac.

📒 Files selected for processing (2)

• features/admin.console-settings.v1/components/console-settings-tabs.tsx
• features/admin.tenants.v1/components/system-settings/system-settings-tabs.tsx