Fix: Tab click events firing multiple times due to missing useCallback dependency

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#865 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
72/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Beginne mit der Untersuchung von Tabs.js und konzentriere dich auf die in der Issue beschriebene Funktion onInternalTabClick und die Memoization von tabKeys. Reproduziere das Verhalten mit dynamisch wechselnden Tab-Inhalten und häufigen erneuten Renderings und überprüfe anschließend, dass jeder Tab-Klick onChange genau einmal aufruft.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Problem Description

When using rc-tabs, tab click events can fire multiple times unexpectedly, especially when the component re-renders frequently. This happens because the onInternalTabClick function is recreated on every render without proper memoization.

Root Cause

The issue is in the Tabs.js file where onInternalTabClick function is defined as a regular function instead of using React.useCallback. This causes the function to be recreated on every render, which can lead to:

  1. Unnecessary re-renders of child components
  2. Multiple event handlers being attached
  3. Click events firing multiple times

Solution

The fix involves two main changes:

  1. Memoize tab keys: Use React.useMemo to memoize the tab keys array to prevent unnecessary re-computations
  2. Memoize click handler: Wrap onInternalTabClick with React.useCallback to prevent function recreation on every render
Code Changes
// Before
var tabKeys = React.useMemo(function () {
  return tabs.map(function (tab) {
    return tab.key;
  });
}, [tabs]);

// After
var tabKeys = React.useMemo(function () {
  return tabs.map(function (tab) {
    return tab.key;
  });
}, [tabs]);

// Before
function onInternalTabClick(key, e) {
  onTabClick === null || onTabClick === void 0 || onTabClick(key, e);
  var isActiveChanged = key !== mergedActiveKey;
  setMergedActiveKey(key);
  if (isActiveChanged) {
    onChange === null || onChange === void 0 || onChange(key);
  }
}

// After
var onInternalTabClick = React.useCallback(function (key, e) {
  onTabClick === null || onTabClick === void 0 || onTabClick(key, e);
  var isActiveChanged = key !== mergedActiveKey;
  setMergedActiveKey(key);
  if (isActiveChanged) {
    onChange === null || onChange === void 0 || onChange(key);
  }
}, [onTabClick, mergedActiveKey, onChange]);

Reproduction Steps

  1. Create a Tabs component with dynamic content
  2. Add console.log in the onChange handler
  3. Click on a tab multiple times
  4. Observe that the onChange handler fires multiple times for a single click

Expected Behavior

Each tab click should trigger the onChange handler exactly once, regardless of component re-renders.

Environment

  • rc-tabs version: [affected versions]
  • React version: [tested versions]
  • Browser: All browsers

Impact

This issue affects applications that:

  • Have frequent re-renders
  • Use dynamic tab content
  • Rely on accurate click event handling
  • Need to prevent duplicate API calls or state updates

The fix improves performance and prevents unexpected behavior in applications using rc-tabs.

Vorherrschende Sprache
TypeScript
Sterne
573
Forks
245
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-component/tabs

Alle Issues in react-component/tabs

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.