Skip to content

[Bug]: Carousel component memory leak #34658

@sharonumute

Description

@sharonumute

Component

Carousel

Package version

9.63.0

React version

18.2.0

Environment

System:
    OS: Linux 6.8 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 55.85 GB / 62.79 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  npmPackages:
    @types/react: ^18.2.0 => 18.3.3 
    @types/react-dom: ^18.2.0 => 18.3.0 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1

Current Behavior

Memory leak test produces the following leaks:

--Similar leaks in this run: 3214--
--Retained size of leaked objects: 448.6KB--
[Window] (native) @189275 [25.1KB]
  --6 (element)--->  [HTMLDocument] (native) @5359727 [103.7KB]
  --62 (element)--->  [InternalNode] (native) @106802 [95KB]
  --1 (element)--->  [InternalNode] (native) @106782 [95KB]
  --13 (element)--->  [InternalNode] (native) @146456 [112 bytes]
  --1 (element)--->  [InternalNode] (native) @146420 [112 bytes]
  --1 (element)--->  [EventListener] (native) @146422 [112 bytes]
  --1 (element)--->  [V8EventListener] (native) @146626 [40 bytes]
  --1 (element)--->  [documentDownListener] (closure) @7611753 [8.7KB]
  --context (internal)--->  [<function scope>] (object) @7611755 [8.6KB]
  --emblaApi (variable)--->  [Object] (object) @7917967 [1.8KB]
  --slidesNotInView (property)--->  [slidesNotInView] (closure) @7919383 [32 bytes]
  --context (internal)--->  [<function scope>] (object) @7919337 [1.1KB]
  --root (variable)--->  [Detached <div role="presentation" draggable="true" class="fui-CarouselViewport ___kf3xbv0_1fome3j f6dzj5z f14z66ap">] (native) @7184007 [840 bytes]
  --9 (element)--->  [Detached <div class="___1uhwzmo_0000000 ftuwxu6 f1869bpl fly5x3f f19gb1f4 fj00lsa f1jq0wj0">] (native) @7184675 [19.4KB]
  --6 (element)--->  [Detached <div>] (native) @7184679 [13.3KB]
  --5 (element)--->  [Detached <div class="fui-CarouselNavContainer ___1g36ldg_1s0jf03 f22iagw f1063pyq f4d9j23 fly5x3f f1aehjj5 f1s184ao">] (native) @7184681 [12.9KB]
  --6 (element)--->  [Detached <span hidden="">] (native) @7184683 [528 bytes]
  --7 (element)--->  [Detached <button type="button" tabindex="0" class="fui-CarouselButton fui-Button r1alrhcs fui-CarouselNavContainer__next ___1162s01_qaxvkv0 fgr6219 f10jk5vf fkfq4zb fhovq9v fc5wo7j f8491dx f1p3nwhy f11589ue f1q5o8ev f1pdflbu f1t94bn6 f1s2uweq fr80ssc f1ukrpxl fecsdlb fnwyq0v ft1hn21 fuxngvv fy5bs14 fsv2rcd f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1omzyqd f1dfjoow f1j98vj9 fj8yq94 f4xjyn1 f1et0tmh f9ddjv3 f1wi8ngl f18ktai2 fwbmr0d f44c6la" aria-labelledby="lpc-fluent-lpc-FluentV9-tooltip-rn" aria-disabled="false">] (native) @7184997 [4.1KB]
  --5 (element)--->  [Detached <span class="fui-CarouselButton__icon fui-Button__icon rywnvv2">] (native) @7184999 [3KB]
  --9 (element)--->  [Detached InternalNode] (native) @131890 [128 bytes]
  --1 (element)--->  [Detached InternalNode] (native) @133332 [128 bytes]
  --2 (element)--->  [Detached InternalNode] (native) @138432 [88 bytes]
  --1 (element)--->  [Detached InternalNode] (native) @126414 [88 bytes]
  --1 (element)--->  [Detached Attr] (native) @126416 [88 bytes]

--Similar leaks in this run: 1--
--Retained size of leaked objects: 7.1KB--
[<synthetic>] (synthetic) @1 [101.7MB]
  --2 (shortcut)--->  [Window / https://localhost:3333] (object) @5350561 [82.5KB]
  --ReactDOM (property)--->  [Object] (object) @5438507 [1.5KB]
  --unstable_renderSubtreeIntoContainer (property)--->  [renderSubtreeIntoContainer] (closure) @5438529 [80 bytes]
  --context (internal)--->  [<function scope>] (object) @5437967 [186.9KB]
  --rootWithPassiveNestedUpdates (variable)--->  [FiberRootNode] (object) @7196445 [11KB]
  --current (property)--->  [Detached FiberNode HostRoot] (object) @7709319 [7.1KB]
--Similar leaks in this run: 1--
--Retained size of leaked objects: 788 bytes--
[Window] (native) @189275 [25.1KB]
  --6 (element)--->  [HTMLDocument] (native) @5359727 [103.7KB]
  --62 (element)--->  [InternalNode] (native) @106802 [95KB]
  --1 (element)--->  [InternalNode] (native) @106782 [95KB]
  --13 (element)--->  [InternalNode] (native) @146456 [112 bytes]
  --1 (element)--->  [InternalNode] (native) @146420 [112 bytes]
  --1 (element)--->  [EventListener] (native) @146422 [112 bytes]
  --1 (element)--->  [V8EventListener] (native) @146626 [40 bytes]
  --1 (element)--->  [documentDownListener] (closure) @7611753 [8.7KB]
  --context (internal)--->  [<function scope>] (object) @7611755 [8.6KB]
  --options (variable)--->  [Object] (object) @7790289 [16 bytes]
  --onSelectViaDrag (property)--->  [<closure>] (closure) @7449273 [2.2KB]
  --context (internal)--->  [<function scope>] (object) @7700933 [2.2KB]
  --fn (variable)--->  [<closure>] (closure) @7700935 [28 bytes]
  --context (internal)--->  [<function scope>] (object) @7408887 [320 bytes]
  --onDragIndexChange (variable)--->  [<closure>] (closure) @7700811 [180 bytes]
  --context (internal)--->  [<function scope>] (object) @7789453 [148 bytes]
  --callback (variable)--->  [<closure>] (closure) @7449355 [76 bytes]
  --context (internal)--->  [<function scope>] (object) @7700971 [288 bytes]
  --onFeedback (variable)--->  [<closure>] (closure) @7449493 [156 bytes]
  --context (internal)--->  [<function scope>] (object) @7746909 [80 bytes]
  --eventing (variable)--->  [Object] (object) @7258425 [23.2KB]
  --bubble (property)--->  [bubble] (closure) @7284683 [360 bytes]
  --context (internal)--->  [<function scope>] (object) @7280055 [284 bytes]
  --unmountEventingRef (variable)--->  [Object] (object) @7280187 [16 bytes]
  --current (property)--->  [Object] (object) @7445131 [22.6KB]
  --bubble (property)--->  [bubble] (closure) @7451971 [22.6KB]
  --context (internal)--->  [<function scope>] (object) @7451989 [22.5KB]
  --onSelectPrompt (variable)--->  [native_bind] (closure) @7266903 [864 bytes]
  --bound_argument_0 (shortcut)--->  [Detached FiberNode react.lazy FunctionComponent] (object) @7403491 [788 bytes]

Expected Behavior

Memory leak test should produce zero leaks relating to this component.

Reproduction

See steps to reproduce

Steps to reproduce

Problem exists in the 1JS repository for the Live Persona Card implementation.
The Carousel is used in the new Copilot Tab on the LPC and can be seen there:
Image
The tests are E2E tests run from the lpc-teams-web package

Accessing the 1JS Repo:

Running the tests:

  • Install dependencies: yarn fast @1js/lpc-teams-web
  • Build the package: yarn build-scope @1js/lpc-teams-web
  • In two separate terminals of your enlistment navigate to the lpc-teams-web package: cd packages/lpc-teams-web
  • In the first terminal run the experience: yarn start:webpack
  • In the second terminal, run the Playwright tests: npx playwright test --config=playwright.optional.config.ts --ui-host 0.0.0.0
  • This should open a browser tab for the playwright tests
  • The memory tests for the Copilot tab are located at the bottom in a test file called EVCopilotTab-memory.e2e-optional.ts
    Image
  • Click the Run button next to this test
  • Observer the Console logs (Scroll to the bottom for the leak output)

Where is the Carousel being used?
PeopleRecommendedPromptsTablets.tsx

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

Copilot in LPC

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    The provided reproduction is a minimal reproducible example of the bug.

Activity

sharonumute

sharonumute commented on Jun 19, 2025

@sharonumute
Author

Hello, the first memory leak still shows up kind of. This time it no longer shows documentDownListener as the source but shows the Carousel is still detached

--Similar leaks in this run: 3094--
--Retained size of leaked objects: 459.6KB--
[Window] (native) @186381 [25.1KB]
  --6 (element)--->  [HTMLDocument] (native) @5491583 [108.5KB]
  --62 (element)--->  [InternalNode] (native) @106434 [99.8KB]
  --1 (element)--->  [InternalNode] (native) @106398 [99.8KB]
  --11 (element)--->  [InternalNode] (native) @106430 [336 bytes]
  --1 (element)--->  [InternalNode] (native) @108530 [336 bytes]
  --3 (element)--->  [InternalNode] (native) @149688 [112 bytes]
  --1 (element)--->  [EventListener] (native) @149684 [112 bytes]
  --1 (element)--->  [V8EventListener] (native) @149686 [40 bytes]
  --1 (element)--->  [<closure>] (closure) @8035827 [76 bytes]
  --context (internal)--->  [<function scope>] (object) @8051433 [404 bytes]
  --update (variable)--->  [<closure>] (closure) @8051279 [28 bytes]
  --context (internal)--->  [<function scope>] (object) @8051281 [84 bytes]
  --engine (variable)--->  [Object] (object) @8051627 [3.9KB]
  --slideFocus (property)--->  [Object] (object) @8051661 [48 bytes]
  --init (property)--->  [init] (closure) @8052673 [32 bytes]
  --context (internal)--->  [<function scope>] (object) @8052667 [35.7KB]
  --root (variable)--->  [Detached <div role="presentation" draggable="true" class="fui-CarouselViewport ___kf3xbv0_1fome3j f6dzj5z f14z66ap">] (native) @7305403 [856 bytes]
  --7 (element)--->  [Detached <div role="region" class="fui-Carousel ___9dp9hm0_ih73q00 f1115ve7 f10pi13n f1l02sjl f1a3p1vp" draggable="true">] (native) @7305401 [768 bytes]
  --7 (element)--->  [Detached <div class="___lzv95w0_0000000 f6dzj5z f1gl81tg f1erf4jj f11ysow2">] (native) @7305399 [560 bytes]
  --7 (element)--->  [Detached <div role="group" id="people-prompt-carousel-root" class="fui-Card rfxo2k2 ___1a481rd_fg5dhp0 f1vx9l62 f14k419y f1fgo9fz fvqmfsm f3am6yf f1r5wgso frsmuga fuldkky fxugw4r f1couhl3 f16gxe2i fpgykix f1osi826 fzybk4o ftqa4ok f2hkw1w f8hki3x f1d2448m f1bjia2o ffh67wi f226i61 f13kzufm flujwa2 fsx75g8 f15bsgw9 f14e48fq f18yb2kv fd6o370 fpqizxz fnd8nzh f15fr7a0 fwsq40z f34ld9f fy0y4wt fod5ikn figsok6 fwbpcpn f1lydt1q f10pi13n">] (native) @7305397 [24.5KB]
  --8 (element)--->  [Detached <div style="">] (native) @7307165 [632 bytes]
  --7 (element)--->  [Detached <section aria-label="Recommended prompts" data-log-name="PeopleRecommendedPrompts">] (native) @7260223 [760 bytes]
  --7 (element)--->  [Detached <div class="___4ylxfq0_0000000 f22iagw f1vx9l62 f1sy4kr4 f1ga9sj3">] (native) @7307129 [560 bytes]
  --7 (element)--->  [Detached <div class="customScrollBar ___1oy5vey_1jdby16 f1l02sjl fxugw4r fqkkaap" id="l2PanelRoot" data-log-name="CopilotTab">] (native) @7307125 [840 bytes]
  --9 (element)--->  [Detached <div id="headerRoot">] (native) @7308283 [632 bytes]
  --5 (element)--->  [Detached <div class="container-157">] (native) @7307977 [600 bytes]
  --5 (element)--->  [Detached <div class="personaInfo-158">] (native) @7307979 [600 bytes]
  --6 (element)--->  [Detached <div role="presentation" class="details-159">] (native) @7307981 [688 bytes]
  --6 (element)--->  [Detached <div class="ms-FocusZone css-113 actions-208" data-tabster="{&quot;uncontrolled&quot;: {}}" data-focuszone-id="FocusZone29">] (native) @7307983 [44.5KB]
  --5 (element)--->  [Detached <div aria-describedby="toolBarAriaDescription" aria-label="Actions to contact " role="toolbar">] (native) @7307989 [41.7KB]
  --5 (element)--->  [Detached <div class="list-98 itemsList-209">] (native) @7307991 [40.8KB]
  --5 (element)--->  [Detached <div aria-label="Item 1 of 4" class="listItemHorizontal-100 itemWrapper-210">] (native) @7308065 [10.1KB]
  --9 (element)--->  [Detached <div aria-label="Item 2 of 4" class="listItemHorizontal-100 itemWrapper-210">] (native) @7308047 [10KB]
  --5 (element)--->  [Detached <button type="action" data-log-name="" title="Navigate to Mock User's org chart" class="ms-Button-228 ms-Button--action ms-Button--command root-307" aria-label="Navigate to Mock User's org chart" data-is-focusable="true" tabindex="-1">] (native) @7308049 [9.3KB]
  --5 (element)--->  [Detached <span class="ms-Button-flexContainer-235 flexContainer-147" data-automationid="splitbuttonprimary">] (native) @7308051 [7.9KB]
  --5 (element)--->  [Detached <i data-icon-name="vNextOrg" aria-hidden="true" class="ms-Icon root-91 ms-Button-icon-230 icon-308">] (native) @7308053 [7.2KB]
  --5 (element)--->  [Detached <span class=" icon-155">] (native) @7308055 [6.4KB]
  --6 (element)--->  [Detached SVGSVGElement] (native) @7308057 [2.9KB]
  --5 (element)--->  [Detached SVGAnimatedLength] (native) @144570 [64 bytes]
Mitch-At-Work

Mitch-At-Work commented on Jun 23, 2025

@Mitch-At-Work
Contributor

We've identified the secondary leak here (retention of carousel reference in setter), secondary PR should resolve this: #34686

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @sharonumute@tudorpopams@Mitch-At-Work

      Issue actions

        [Bug]: Carousel component memory leak · Issue #34658 · microsoft/fluentui