How to get around the react-progress-2 error?

Question

JavaScript

Hi all!
I ran into a problem: I put a loader in the header of the page " react-progress-2 " in my application.
Here's a plan.
Everything works on one page, but if I go from one page to another, I get an error:
And it doesn’t matter if I call this function in a didmount or on a click or another event, the result is the same.

import Progress from "react-progress-2";
import "react-progress-2/main.css"

loadPage = () => {
  Progress.show();
  setTimeout(() => Progress.hideAll(),800);
}

<Progress.Component/>

It works very simply. But as I understand it, this is a singleton component and it simply does not want to work on few pages, how can I get around this? Or can someone tell me another loader? NProgress can't be configured. If anything, an application on Gatsby JS

Answer 1

1. You can only use one component per page, as the reference to the instance is written in the prototype .
2. The reason for the error is that you do not clear the timeout during the transition. First , the reference to the instance is removed , then your timeout is triggered and the method of the non- existent reference is called. To get rid of the error, it is enough to clear the timeout in componentWillUnmount:

loadPage = () => {
  Progress.show();
  this._hideAllTimeout = setTimeout(() => Progress.hideAll(),800);
}

componentWillUnmount() {
  clearTimeout(this._hideAllTimeout);
}