Underlying WKWebView instance is not disposed of after unmounting WebView component

[jacamera]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
  OS: macOS High Sierra 10.13.6
  CPU: x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
  Memory: 82.27 MB / 8.00 GB
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 8.11.3 - /usr/local/bin/node
  npm: 5.6.0 - /usr/local/bin/npm
SDKs:
  iOS SDK:
    Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
  Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
  react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
  react-native: 0.57.4 => 0.57.4
npmGlobalPackages:
  react-native-cli: 2.0.1
  react-native-git-upgrade: 0.2.7

Description

When the useWebKit prop is set on the WebView component the underlying WKWebView instance does not get disposed of after the component is unmounted. These lingering instances can be seen using the Develop menu in Safari. This is only a problem when the useWebKit prop is set.

Reproducible Demo

1. Run the following code using react-native run-ios from the repository or by copy/pasting into App.js in a newly initialized React Native project.
2. Launch Safari and verify that you can see JSContext running in the simulator.
3. Click the 'Toggle WebView' button to mount and unmount the WebView component.
4. Verify that the unmounted WKWebView instances are still active and accessible via Safari.
5. Remove the useWebKit prop and re-run to verify this only happens when that prop is set.

Repository: https://github.com/jacamera/rnWebviewTest

App.js:

import React, {Component} from 'react';
import {View, Button, WebView} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { showWebView: false };
    this._toggleWebView = () => {
      this.setState(prevState => ({ showWebView: !prevState.showWebView }));
    };
  }
  render() {
    return (
      <View style={{ flex: 1, padding: 50 }}>
        <Button
          onPress={this._toggleWebView}
          title="Toggle WebView"
        />
        {this.state.showWebView ?
          <WebView
            source={{ uri: 'https://www.google.com' }}
            useWebKit
          /> :
          null}
      </View>
    );
  }
}

Screenshot:

[bartolkaruza]

Have you tried this with the separate react-native-webview ? It looks like that's where more improvements for the Webview component land (faster) and the current one will be removed from the core at some point, according to this approved proposal. You can see the full discussion here.

[jacamera]

@bartolkaruza Thank you for bringing this to my attention. I had fallen back to using https://github.com/CRAlpha/react-native-wkwebview since there was no mention of the separate WebView package in the docs. I just tested it and the separate react-native-webview disposes of the WebView instances properly so it's just an issue with the built-in component.

I feel like this issue should still be left open though since this seems like a pretty serious memory leak and there isn't any indication from the docs or console output that the built-in WebView component shouldn't be used.

[hramos]

Please file an issue over at https://github.com/react-native-community/react-native-webview. The webview in this repository will be removed in a future version, and no WebView PRs are being merged on this repository.