Performance Mistake I made in React Native

This article serves as the purpose for me to record what I did wrong during coding period. This mistake is about memory did not get released (Memory Leak) when JS component is unmounted.

Why does it bother me?

  • Serve as a reminder that mindless programming cause you significant performance issue

I wrote a custom Native UI component in React Native. Lets name it as RNImageView. Below is the code snippet of the ViewManager.

public class RNImageViewManager extends SimpleViewManager<ImageView>{
private RNImageView rnImageView;

@Override
public String getName() {
return "RNImageVIew";
}

@Override
protected ImageView createViewInstance(ThemedReactContext reactContext) {
rnImageView = new RNImageView(reactContext);
return rnImageView;
}

If you already discover the memory leak cause. Congratulations and you can move on to close this article. Well, if you don’t, perhaps the remaining article might provide some value for you.

Discovering Process

After several research from github issue and google, I discover the cause of the problem is the RNImageView instance I created.

When view get destroyed, the rnImageVIew instance I created at the first place is still holding the memory of the view despite the view get destroyed. In my real case, the rnImageView is actually holding 100MB memory. And yeah !! I cause myself 100MB memory leak.

Solution

public class RNImageViewManager extends SimpleViewManager<ImageView>{
@Override
public String getName() {
return "RNImageVIew";
}

@Override
protected ImageView createViewInstance(ThemedReactContext reactContext) {
return new RNImageView(reactContext);
}

Thanks for reading. I hope you get something from this article.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.