Getting this error while my timer is ending: "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates..."

Question

So I thing this is happening because of the conditional rendering and state change. Here is my rendering:

!isOn
    ?
        {...}
    :
        <CountDown
            until={2}
            onFinish={onFinish}
            digitStyle={styles.timerContainer}
            digitTxtStyle={styles.timerTextSize}
            timeToShow={mins >= 60 ? ["H", "M", "S"] : ["M", "S"]}
            timeLabels={{}}
            separatorStyle={styles.timerTextSize}
            showSeparator
        />

Here is my onFinished method:

const onFinish = () => {
    setTimeHook({
        ...timeHook,
        isOn: 0,
    });
};

And the state:

const time = {
    mins: 5,
    isOn: 0,
};

const [timeHook, setTimeHook] = useState(time);

I'm also not familiar about what does even mean this error, so any info would be great. Though the code works well, I'm afraid of memory leak. So how can I fix that problem?

Answer 1

Yes, It's cause of conditional rendering. Components is cleared completely in this case.

You can try display prop to show/hide component display?: "flex" | "none".

Here's an example

<View style={{ display: !isOn? 'flex' : 'none' }}>
  {...}
</View>
<View style={{ display: isOn? 'flex' : 'none' }}>
<CountDown
   until={2}
   onFinish={onFinish}
   digitStyle={styles.timerContainer}
   digitTxtStyle={styles.timerTextSize}
   timeToShow={mins >= 60 ? ["H", "M", "S"] : ["M", "S"]}
   timeLabels={{}}
   separatorStyle={styles.timerTextSize}
   showSeparator
/>
</View>