WhoBuilt

The Ghost Player - A Memory Story

Sep 26, 2024· 32 min· 348 views·Watch on YouTube

Speaker

Delphine Bugner, a React Native engineer at a Paris startup working on EV charging, explains how a native video player kept running after its React component was removed, at React Universe Conf 2024 with Callstack.

How the ghost player appeared

TF1 rebuilt its news app with React Native, integrating its existing iOS and Android video players through a custom bridge. In February 2023, Bugner replaced background players with placeholders to reduce the number of active players, but removed players kept playing audio.

Tracing the old architecture lifecycle

Bugner uses Xcode’s Memory Graph to inspect objects and their references, then explains how view managers register native components, create views, and handle prop changes. In the old architecture, the UI Manager inserts a native view into the tree and removes it when the React component unmounts, allowing it to be released if no strong references remain.

Finding and cleaning up the extra reference

The player remained alive because a Player Controller outside the React tree still referenced it. The team fixed the issue by destroying that controller during native cleanup; a separate iOS 15 issue after upgrading React Native Screens required a patch and remained in progress.

Why recycling brings the problem back

In the new architecture, Codegen generates native prop definitions from TypeScript, and the view registry can keep removed views in a recycling pool. A later player may reuse the same native view, so its controller can continue playing unless cleanup runs in the prepare-for-recycle callback or recycling is disabled for that component.

Platform differences and tradeoffs

View recycling avoids recreating native views and can improve performance; the pool is flushed when memory use gets too high. Android has a similar reuse mechanism, but Bugner found it was behind a feature flag and noted that the team was still measuring its performance benefits.

Takeaways

  • Use Xcode’s Memory Graph to find strong references that keep native views alive after React unmounts them.
  • Clean up controllers and other external resources when native views are destroyed or prepared for recycling.
  • Treat recycled views as reusable stateful objects: reset them before reuse, especially when they own playback or controller resources.
  • Check platform defaults and feature flags before assuming React Native recycling works the same way on iOS and Android.

Mentioned in this talk

Search inside this talk

What was claimed 7

  • previously at
    Delphine Bugner previously at BAM
    “I started working for them in July 2021 with my previous company, BAM”
    YouTube
    Unverified1 source· Talk
  • built
    React Native bridge for its native video player
    “we had to develop the bridge ourselves to integrate the player”
    YouTube
    Unverified1 source· Talk
  • works at
    “I'm now working at a small startup in Paris ... It's called Tabblu”
    YouTube
    Unverified1 source· Talk
  • integrates with
    Ghost Player integrates with AVPlayer
    “The bridge is also based on AVPlayer”
    YouTube
    Unverified1 source· Talk
  • feature
    React: IOS new architecture can recycle native views through a view registry and pool
    “the view registry is added to the pool”
    YouTube
    Unverified1 source· Talk
  • feature
    React: IOS views can run prepare-for-recycle cleanup before reuse
    “we now have a prepare-for-recycle callback where you can execute all the cleanup you need”
    YouTube
    Unverified1 source· Talk
  • built
    Meta built Litho
    “They’ve already implemented it for Litho. It’s a framework developed by Meta”
    YouTube
    Unverified1 source· Talk

Related talks