Skip to content

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

Open
@vikjovanov

Description

@vikjovanov

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions