Is it possible to use ClearInterval inside static getDerivedStateFromPRops method in React? - reactjs

Question

I have set an Interval and did some Operation inside ComponentDidMount method. I want to clear the Interval after I get props.status is completed.
class A extends React.PureComponent {
constructor(props) {
super(props);
this.intervalTimer = '';
}
componentDidMount() {
this.intervalTimer = setTimeout(() => {
// do something;
}, 3000);
}
static getDerivedStateFromProps(np, ps) {
if(np.status === 'completed') {
clearInterval(A.intervalTimer);
}
}
}

Answer 1

You could create static variable and use that in getDerivedStateFromProps lifecycle method.
Here intervalTimer is the variable which is accessible inside static method.
Here is the working code:-
import React from "react";
import ReactDOM from "react-dom";
let intervalTimer = "";
class App extends React.PureComponent {
state = {
stop: false
};
componentDidMount() {
intervalTimer = setInterval(() => {
console.log("interval going on");
}, 3000);
}
handleClick = () => {
this.setState({ stop: true });
};
static getDerivedStateFromProps(props, state) {
if (state.stop) {
clearInterval(intervalTimer);
}
return null;
}
render() {
return (
<div>
<button onClick={this.handleClick}>Stop interval</button>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Or you could also use static variable instead of global variable
static intervalTimer = ''
componentDidMount() {
App.intervalTimer = setInterval(() => {
console.log("interval going on");
}, 3000);
}
static getDerivedStateFromProps(props, state) {
if (state.stop) {
clearInterval(App.intervalTimer);
}
return null;
}
Both approaches will work just fine.
Hope that helps!!!

Answer 2

You shouldn't allow getDerivedStateFromProps to change a none static variable or call a none static method. Its best to just return the new state from there. My suggestion will be for you to use a different life cycle method like
componentDidUpdate(prevProps) {
// compare status props and clear timer
if (this.props.status === 'completed') {
clearInterval(this.intervalTimer);
}
}
to be on a safe side also do the clearing inside
componentWillUnmount(){
clearInterval(this.intervalTimer)
}