chore: fixed sync state update in useEffect

[basmasking]

Fixes #446

Changes proposed in this pull request:

• implemented the new useEffectEvent to move sync state change to safe hook and keep in sync with best practices

@MaskingTechnology/comify

[coderabbitai]

Summary by CodeRabbit

• Refactor
  • Improved internal tab selection handling for enhanced reliability and performance.

Walkthrough

Replaces a direct state update inside a useEffect with a memoized event handler created via useEffectEvent. The handler computes a safe default tab ID (using tabList[0]?.props.id) and sets the selected state; the effect now calls this handler when selectedId or tabList change.

Changes

Cohort / File(s)	Summary
Tabs component refactor src/webui/designsystem/components/tabs/Tabs.tsx	Added useEffectEvent import; introduced updateSelected via useEffectEvent to compute default tab id (tabList[0]?.props.id) and call setSelected with `selectedId

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant UI as Tabs Component
  participant Evt as useEffectEvent:updateSelected
  participant Eff as useEffect (watcher)
  participant State as setSelected

  rect `#f3f9ff`
    UI->>Eff: mount / selectedId or tabList change
    Eff->>Evt: invoke updateSelected()
  end

  rect `#eef7ea`
    Evt->>Evt: compute firstTabId = tabList[0]?.props.id
    Evt->>State: setSelected(selectedId || firstTabId)
  end

  State-->>UI: selected state updated
  UI->>UI: re-render with new selected tab

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5-10 minutes

• Single-file change with a focused refactor to align with React lint rule.
• Pay attention to correct dependency list in the effect and that useEffectEvent usage preserves prior semantics.

Poem

🐰 I hopped in to tidy the flow,
A gentle event to guide which tab to show,
No more sync in effect, neat and bright,
Tabs pick the first if none feels right,
A tiny refactor—soft, swift, and light.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: refactoring synchronous state updates in useEffect to use useEffectEvent for best practices compliance.
Description check	✅ Passed	The description follows the template structure with issue reference (#446), clearly explains the proposed changes using useEffectEvent, and includes the team mention.
Linked Issues check	✅ Passed	The code changes successfully implement useEffectEvent to replace synchronous state updates in useEffect, directly addressing issue #446's requirement for lint-compliant state management.
Out of Scope Changes check	✅ Passed	All changes are scoped to the Tabs.tsx component and directly address the linked issue; the minor formatting adjustment is a natural part of the refactoring.

✨ 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 446-refactor-sync-state-update-in-useeffect

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1abfc32 and bfb3ab0.

📒 Files selected for processing (1)

• src/webui/designsystem/components/tabs/Tabs.tsx (2 hunks)

🔇 Additional comments (2)

src/webui/designsystem/components/tabs/Tabs.tsx (2)

3-3: LGTM – useEffectEvent is available in React 19.2.

The import is correct for the React version in use.

---

45-48: LGTM – dependency array correctly includes tabList.

The effect now depends on both selectedId and tabList, ensuring the selected state stays synchronized when either the prop changes or the children update. This addresses the scenario where children change while selectedId remains undefined, keeping the selection valid.

---

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

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/webui/designsystem/components/tabs/Tabs.tsx (1)

17-17: Initialize state with the correct first tab ID.

The initial state defaults to an empty string when selectedId is undefined, which may not correspond to a valid tab. This creates a momentary inconsistent state before the effect runs.

Apply this diff to compute the initial value correctly:

-    const [selected, setSelected] = useState<string>(selectedId ?? '');
+    const [selected, setSelected] = useState<string>(() => selectedId ?? (Array.isArray(children) ? children[0]?.props.id : children.props.id) ?? '');

Or, more cleanly, derive tabList earlier and use it:

const tabList = useMemo(() => {
    return Array.isArray(children) ? children : [children];
}, [children]);

const [selected, setSelected] = useState<string>(() => selectedId ?? tabList[0]?.props.id ?? '');

Note: The second approach requires moving the tabList memo before the useState call.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3f425da and 1abfc32.

📒 Files selected for processing (1)

• src/webui/designsystem/components/tabs/Tabs.tsx (2 hunks)

🔇 Additional comments (1)

src/webui/designsystem/components/tabs/Tabs.tsx (1)

3-3: LGTM: useEffectEvent import is correct for React 19.2.

The import is valid for the React version in use (19.2.0).

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud