Memory leak in StyleSheet.create

The problem
When creating a style sheet, the object gets registered in ReactNativePropRegistry. The registry is a module-scoped map where the object is added with a unique key. This object will never be removed from the map. This is a problem for style sheets that contain dynamic properties and need to be recreated.

In React Native, the same code does not cause an issue since the ReactNativePropRegistry does not exist anymore and StyleSheet.create just returns the object passed in.

How to reproduce
Simplified test case: https://codesandbox.io/s/boring-lumiere-c2pw4

Steps to reproduce:

  1. Start performance profiling in Chrome DevTools.
  2. Force garbage collection
  3. Press the button a number of times
  4. Force garbage collection
  5. End performance profiling
  6. Observe the rise in allocated memory

Expected behavior
The memory should be reclaimed on garbage collection, or there should be a way of “deleting” a created style sheet.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.15.0
  • React (version): 17.0.1
  • Browser: Chrome Version 88.0.4324.192 (Official Build) (x86_64)

Perhaps ReactNativePropRegistry could be dropped from react-native-web, to align with react-native?

1 possible answer(s) on “Memory leak in StyleSheet.create

  1. Cool, now I know. Works fine without StyleSheet.

    Anyway it’s incredibly cool to be able to reuse around 95%% of code between iOS, Android and Web in quite a decently sized app. Excellent work on this package! 😃