react-native-walkthrough-tooltip icon indicating copy to clipboard operation
react-native-walkthrough-tooltip copied to clipboard

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

Open vikjovanov opened this issue 5 years ago • 6 comments

I have this error, and the error tells me it's from Tooltip! My components can sometimes mount / unmount very quickly, however, I protect my state updates so that they only run if the component they are called from is mounted.

This is my code where the tooltip is defined:

<Tooltip
isVisible={isVisible}
content={...}
placement="top"
onClose={onExitModal}
backgroundColor="#00000040"
contentStyle={ownStyles.tooltip}
tooltipStyle={SHADOWS.default}
useInteractionManager={true}
showChildInTooltip={true}
allowChildInteraction={false}
childContentSpacing={20}
>
    <TooltipChildrenContext.Consumer>
    {
        ({ tooltipDuplicate }) => (
            <TouchableWithoutFeedback
                onPress={() =>{
                    this.HeartBounceRef && this.HeartBounceRef.animate(ANIMATIONS.heartBounce)
                    onPressHeart && onPressHeart()
                }}
                disabled={isButtonLoading}
            >
                <Animatable.View
                    ref={(ref) => {
                        if (!tooltipDuplicate)
                            this.HeartBounceRef = ref
                    }}
                    duration={300}
                    easing="ease-out-back"
                    useNativeDriver={true}
                >
                    {...}
                </Animatable.View>
            </TouchableWithoutFeedback>
        )
    }
    </TooltipChildrenContext.Consumer>
</Tooltip>

This is a Pure Component.

And now, the error:

Screenshot 2020-08-16 at 07 01 52

Screenshot 2020-08-16 at 07 02 04

vikjovanov avatar Aug 16 '20 05:08 vikjovanov

@jasongaare Hello, thanks for this awesome package :)

It seems like the problem is still here and this code causes memory leak:

setTimeout(() => {
    this.measureChildRect();
});

You can create a variable mounted and assign it to false on componentWillUnmount method and then check if the component is mounted this way:

if(mounted) {
  setTimeout(() => {
      this.measureChildRect();
  });
}

hudymvol avatar Nov 25 '20 13:11 hudymvol

Hi 👋🏼

I'm not opposed to the mounted idea, if you don't mind making a PR, I'd love to get it in there!

jasongaare avatar Nov 27 '20 02:11 jasongaare

Has there been any update on the mounted setstate making it into the code? I'm also running into this issue currently

Sethbarrie avatar Jun 22 '21 20:06 Sethbarrie

Still running into this issue, unfortunately.

rnz269 avatar Jan 09 '23 18:01 rnz269

I'm still having this issue

saitejas-cypherd avatar Feb 15 '23 12:02 saitejas-cypherd

Still having this issue

RobertMrowiec avatar Feb 28 '23 14:02 RobertMrowiec