Memory leak when rendering a list of views

[derekhdawson]

I am creating a basic audio recording app. I have generated a waveform like in the screenshot below, but it is creating a memory leak. I have created a sample app to demonstrate the memory leak (https://snack.expo.io/HJ-THitxH).

The waveform is generated by rendering a list of <View />'s like this:

this.state.waveforms.map((waveform, i) => (
  <View
    key={`${waveform}`}
    style={{
      position: 'absolute',
      top: height / 2 - waveform / 2,
      left: i * 3,
      backgroundColor: 'red',
      width: 3,
      height: waveform
    }}
  />
))

The waveform array contains random values that I generate like so:

generateWaveforms() {
  setInterval(() => {
    const waveformHeight = 200 * Math.random();
    const newWaveForms = this.state.waveforms;
    if (newWaveForms.length < 150) {
      // keep adding waveforms until reaching capacity which is 150
      newWaveForms.unshift(waveformHeight);
    } else {
      // remove the last waveform and insert new one
      newWaveForms.pop();
      newWaveForms.unshift(waveformHeight);
    }
    console.log(newWaveForms.length);
    this.setState({ waveforms: newWaveForms });
  }, 100);
}

As you can see the length of the waveform array never goes beyond 150. So there are a maximum number of 150 <View />'s. However, my memory continues to increase. When I comment out the rendering but continue to generate random numbers there is no memory leak so I know it is in the rendering part. I have been stuck on this for a while so I would really appreciate any help from this awesome community! Thanks!

Steps To Reproduce

https://snack.expo.io/HJ-THitxH

Describe what you expected to happen:

I expect that my memory use will increase until I am rendering 150 <View />'s then it will plateau.

React Native version:

System:
OS: macOS 10.14
CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Memory: 954.34 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.1 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.0 => 0.60.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

[ecreeth]

@derekhdawson for the rendering of large amounts of data, it is recommended to use FlatList

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.60 and verify if the issue still exists.

Details

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[derekhdawson]

Thanks for the response. I still have no luck with updating to the latest version of react-native as well as using a <FlatList />

Here is my updated code for render

render() {
  return (
    <View style={styles.container}>
      <FlatList
        horizontal
        data={this.state.waveforms.map((waveform, i) => ({
          waveform,
          index: i
        }))}
        contentContainerStyle={{
          flex: 1,
          position: 'relative'
        }}
        renderItem={({ item }) => {
          return (
            <View
              style={{
                position: 'absolute',
                top: height / 2 - parseInt(item.waveform) / 2,
                left: item.index * 3,
                backgroundColor: "red",
                width: 3,
                height: item.waveform
              }}
            />
          );
        }}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
}

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.