Estoy tratando de hacer un contador simple y mostrarlo en la página. Pero se vuelve inesperado o/p. El contador cuenta un valor dos veces en el ejemplo 1 pero funciona perfectamente como quiero en el ejemplo 2. ¿Cuál es la razón por la que no funciona en el ejemplo 1? ¿Cuál es el proceso de fondo para esto?

 // Example: 1 import React, { Component } from 'react'; class Counter extends Component { constructor() { super() this.state = { count: 0, isFirstTime: true } } in() { console.log('How many time function called?'); // consoled one time if (this.state.isFirstTime) { this.setState({ isFirstTime: false }) setInterval(() => { this.setState({ count: this.state.count + 1 }) }, 1000) } } render() { return ( <div> {this.state.isFirstTime && this.in.apply(this)} Counter: {this.state.count} </div> ) } } export default Counter; // Example: 2 import React, { Component } from 'react'; let isFirstTime = true; class Counter extends Component { constructor() { super() this.state = { count: 0 } } in() { console.log('How many time function called?'); // consoled one time if (isFirstTime) { isFirstTime = false setInterval(() => { this.setState({ count: this.state.count + 1 }) }, 1000) } } render() { return ( <div> {isFirstTime && this.in.apply(this)} Counter: {this.state.count} </div> ) } } export default Counter;

Lo estoy ejecutando en React.StrictMode.