Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

[JuliaCastillo]

I get this warning for the Timer component:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

[hraschan]

Can you maybe fix this issue. Guess thats not mutch work. Would help a lot!

[DejaVuMan]

I'm aware that it is likely this project has been shelved or abandoned for the time being, but in case devs ever come back to this, I wanted to help and provide a suggestion for how to overhaul componentWillRecieveProps for the future.

Currently, the way time updating occurs is with the following function:

  componentWillReceiveProps(newProps) {

    if(newProps.start) {
      this.start();
    } else {
      this.stop();
    }
    if(newProps.reset) {
      this.reset(newProps.totalDuration);
    }
  }

As mentioned above by @JuliaCastillo , this could be resolved for now by changing it to UNSAFE_componentWillRecieveProps,
or alternatively by overhauling the function completely and making use of componentDidUpdate instead.

In limited testing I've done on my end with the timer method, I've found that this works identically and doesn't cause issues:

  componentDidUpdate(prevProps) {
    if (this.props.start !== prevProps.start) {
      if(this.props.start) {
          this.start();
      } else {
          this.stop();
      }
    }
    if (this.props.reset !== prevProps.reset) {
      if(this.props.reset) {
          this.reset(this.props.totalDuration);
      }
    }
}

Not a huge React or JS expert so it's possible this code block could be made better