Estoy tratando de borrar un intervalo cuando el componente se desmonta en un componente basado en clase en reaccionar. Investigué un poco sobre esto y vi que en la función del ciclo de vida del componenteWillUnmount, las personas almacenan la función real en una variable en lugar de simplemente borrar el intervalo de inmediato. Por ejemplo:
componentDidMount() { const { stock } = this.props; // Fetch data once user lands on page this.fetchData(stock); // Fetch data every hour setInterval(() => { this.fetchData(stock); console.log('setInterval ran'); }, 3600000); } componentWillUnmount() { const { stock } = this.props; // Remove interval const refreshFetch = clearInterval(this.fetchData(stock)); console.log('setInterval cleared'); } async fetchData(stock) { const data = await getAvgPriceHistory(stock); if (data && data[stock].length) { const dataArray = data[stock].map((arr) => { return arr[1]; }).reverse(); this.setState({ data: dataArray, isLoaded: true }); } else { // straight line if not found. this.setState({ data: [1, 1], isLoaded: true }); } console.log('Data fetched!'); }Mientras tanto, la forma en que estoy acostumbrado a hacer esto en la función componentWillUnmount sin definir una variable así:
componentWillUnmount() { const { stock } = this.props; // Remove interval clearInterval(this.fetchData(stock)); console.log('setInterval cleared'); }¿Hay algún beneficio en hacer uno u otro?
setInterval devuelve una identificación. Puedes usarlo con clearInterval para destruirlo.
https://developer.mozilla.org/en-US/docs/Web/API/setInterval
let intervalId; ... intervalId = setInterval(fn, time); ... clearInterval(intervalId);