Warning: Can't perform a React state update on an unmounted component

[z0al]

I get this warning every now and then. It usually happens when I navigate to a screen that renders a WebView then pressing back immediately.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
- node_modules/react-native/Libraries/LogBox/LogBox.js:173:8 in registerError
- node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
- node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
- node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:106:4 in printWarning
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:75:16 in error
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19152:9 in warnAboutUpdateOnUnmountedFiberInDEV
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17093:40 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11003:16 in dispatchAction
* [native code]:null in dispatchAction
- node_modules/@formidable-webview/webshell/lib/commonjs/hooks/useAutoheight.js:174:6 in useAutoheight
- node_modules/@formidable-webview/webshell/lib/commonjs/hooks/useWebshell.js:109:12 in React.useCallback$argument_0
- node_modules/react-native-webview/lib/WebView.android.js:203:16 in _this.onMessage
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

I assume it has something to do with useAutoheight hook. Let me know if you need more info.

"@formidable-webview/webshell": "^2.3.0"
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz"
"react-native-webview": "11.0.0"

[jsamr]

@z0al Usually, this kind of error happens in a useEffect hook, where an async or delayed (setTimeout) function is invoked with setState after the component is unmounted. What is surprising in the call stack is the state update looks like it's happening in handleOnWebMessage callback from useWebshell, see:

- node_modules/@formidable-webview/webshell/lib/commonjs/hooks/useWebshell.js:109:12 in React.useCallback$argument_0
- node_modules/react-native-webview/lib/WebView.android.js:203:16 in _this.onMessage

handleOnWebMessage doesn't contain asynchronous code, so that's quite surprising. Same for handleDOMHTMLDimensions from useAutoheight which sets state with setState((prevState => nextState). That operation should be safe... I bet you're not using onDOMHTMLDimensions? Doesn't seem like with the stack but I just want to be certain.

[z0al]

I bet you're not using onDOMHTMLDimensions?

I don't.

Here is the full code of my Webshell.tsx

// Packages
import React from 'react';
import WebView from 'react-native-webview';
import useIsMounted from 'use-is-mounted-ref';
import styled from 'react-native-styled.macro';
import * as shell from '@formidable-webview/webshell';
import {
	LayoutChangeEvent,
	ScrollView,
	useWindowDimensions,
} from 'react-native';

// Ours
import { openURL } from '../lib/url';

const Renderer = React.memo(
	shell.makeWebshell(
		WebView,
		new shell.HandleLinkPressFeature({
			preventDefault: true,
			ignoreHashChange: true,
		}),
		// Craft WebView-based components which heights automatically and
		// dynamically adapts to their page content heights, anytime the
		// DOM changes.
		new shell.HandleHTMLDimensionsFeature(),
		// Provides onDOMHashChange prop with payloads of type
		// HashChangeEvent to intercept hashchange events, triggered when
		// the hash fragment of the URL changes.
		new shell.HandleHashChangeFeature({
			shouldResetHashOnEvent: true,
		})
	)
);

export interface WebshellProps {
	html?: string;
	renderBefore?: () => any;
	renderAfter?: () => any;
}

export const Webshell = React.memo((props: WebshellProps) => {
	const isMounted = useIsMounted();
	const scrollViewRef = React.useRef<ScrollView>(null);

	const setState = React.useCallback(
		(updateState: () => any) => {
			if (isMounted.current) {
				updateState();
			}
		},
		[isMounted]
	);

	const [spaceTop, setSpaceTop] = React.useState(0);
	const onLayout = React.useCallback((e: LayoutChangeEvent) => {
		setState(() => setSpaceTop(e.nativeEvent.layout.y));
	}, []);

	const onDOMHashChange = React.useCallback(
		(e: shell.HashChangeEvent) => {
			setState(() =>
				scrollViewRef.current?.scrollTo({
					y: e.targetElementBoundingRect.top + spaceTop,
					animated: true,
				})
			);
		},
		[spaceTop]
	);

	const window = useWindowDimensions();

	const webshellProps = {
		source: { html: props.html },
		cacheEnabled: true,
		originWhitelist: ['*'],
		overScrollMode: 'never',
		javaScriptEnabled: false,
		allowsFullscreenVideo: true,
		allowsInlineMediaPlayback: true,
		onDOMLinkPress: ({ uri }) => openURL(uri),
	} as React.ComponentProps<typeof Renderer>;

	const { autoheightWebshellProps } = shell.useAutoheight({
		webshellProps,
		// Force a static width value to prevent flashing.
		width: window.width,
		// Fixes App crash when navigating into a Stack Screen with
		// an embedded WebView
		initialHeight: window.height,
	});

	return (
		<ScrollView
			ref={scrollViewRef}
			style={styled('flex-1').style}
			pinchGestureEnabled={false}
			overScrollMode="never"
			horizontal={false}
			showsVerticalScrollIndicator={false}
		>
			{props.renderBefore?.()}
			<Renderer
				{...autoheightWebshellProps}
				onLayout={onLayout}
				onDOMHashChange={onDOMHashChange}
			/>
			{props.renderAfter?.()}
		</ScrollView>
	);
});

[jsamr]

@z0al I have two guesses:

1. enableScreens

If you're using react-native-screens, could you try with and without enableScreens? I know there has been a fairly good amount of bugs with this library and WebViews...

2. clearTimeout

I have one timeout effect which should be cleaned, see

webshell/packages/webshell/src/hooks/useAutoheight.ts

Line 315 in 3f57d62

return clearTimeout.bind(null, timeout);

But there is a chance that setting null as this might have unforseen consequences. I have committed a patch which doesn't use bind. I invite you to use the latest published version (2.4.0) and tell me if the issue disappeared.

[z0al]

@jsamr thanks for working on this.

1. enableScreens

Unfortunately toggling this off slows down the app quite significantly. In fact, I can no longer reproduce the issue because I can't navigate in and out of a screen as fast as I could with the native stack.

2. clearTimeout

I tried the latest version (with enableScreens) and the issue is still there.

[jsamr]

@z0al I am willing to help crush this bug but at that point, I think I need a full reproduction in the form of a snack or a git repo. You can take inspiration from this template here: https://snack.expo.io/@jsamr/rnrhtml-template

Make sure you update react-native-render-html in the package.json field.

[jsamr]

Closing due to inactivity, feel free to reopen when a reproduction is ready.