Error in console when duration and key depends on other state

[bogdanpk]

Hi,

I can't figure out how to solve this error in console. Not sure if it's bug. I want that duration changes (and reset timer) when other state changes.

Here is the code:

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import { CountdownCircleTimer } from "react-countdown-circle-timer";

import "./styles.css";

const renderTime = ({ remainingTime }) => {
  if (remainingTime === 0) {
    return <div className="timer">Too lale...</div>;
  }

  return (
    <div className="timer">
      <div className="text">Remaining</div>
      <div className="value">{remainingTime}</div>
      <div className="text">seconds</div>
    </div>
  );
};


function CountDown({remainingTime}) {
  const [key, setKey] = useState(0);
  

  useEffect(()=> {
  setKey(prevState => prevState + 1)
 return () => {
 // not sure what to return here as nothing seems to work
 // setKey(prevState => prevState + 1)
 
}
  },[remainingTime])


  return (
    <div className="App">
      <h1>
        CountdownCircleTimer
        <br />
        React Component
      </h1>
      <div className="timer-wrapper">
        <CountdownCircleTimer
          key={key}
          isPlaying
          duration={remainingTime}
          colors={[["#004777", 0.33], ["#F7B801", 0.33], ["#A30000"]]}
        
        >
          {renderTime}
        </CountdownCircleTimer>
      </div>
      <div className="button-wrapper">
        <button onClick={() => setKey(prevKey => prevKey + 1)}>
          Restart Timer
        </button>
      </div>
    </div>
  );
}

function App() {
  const [remainingTime, setRemainingTime] = useState(10)
  useEffect(()=>{

    setInterval(()=> {
      setRemainingTime(prevState => prevState + 5)
        },2000)

  },[])
  
  return (<CountDown remainingTime={remainingTime} />)
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here is the error:

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.
    in CountdownCircleTimer (at src/index.js:44) 

[bogdanpk]

This should work. Can you confirm?

function CountDown({remainingTime}) {
  const [key, setKey] = useState(0);
  const [duration,setDuration] = useState(remainingTime)

  useEffect(()=> {
  setDuration(remainingTime)


  },[remainingTime])

  useEffect(()=>{
    return ()=> {
    setKey(prevState => prevState + 1)
      }
  },[duration])


  return (
    <div className="App">
      <h1>
        CountdownCircleTimer
        <br />
        React Component
      </h1>
      <div className="timer-wrapper">
        <CountdownCircleTimer
          key={key}
          isPlaying
          duration={duration}
          colors={[["#004777", 0.33], ["#F7B801", 0.33], ["#A30000"]]}
        
        >
          {renderTime}
        </CountdownCircleTimer>
      </div>
      <div className="button-wrapper">
        <button onClick={() => setKey(prevKey => prevKey + 1)}>
          Restart Timer
        </button>
      </div>
    </div>
  );
}

[vydimitrov]

  useEffect(()=>{
    return ()=> {
    setKey(prevState => prevState + 1)
      }
  },[duration])

You should not set state in the return function of useEffect, since the return is fired when the component is unmounted, which leads to the error - Can't perform a React state update on an unmounted component.

[vydimitrov]

I am not sure what you are trying to achieve here tho...

[bogdanpk]

Hi,

Thank you for the answer. When I get new data from web socket, I need to update duration.

I created sand box (without socket implementation, I used setInterval).

https://codesandbox.io/s/amazing-oskar-cn6i0p?file=/src/index.js:644-760
If you don't see error, do refresh on sand box preview.

See screenshot here:
Photo

[vydimitrov]

How about this one?
https://codesandbox.io/s/weathered-mountain-yi1e1j