Estoy tratando de averiguar por qué algunos de mis elementos se restablecen cuando se llama a las funciones. No creo que la página se actualice cuando se les llama, así que mi pregunta es ¿cómo evito que esto suceda? ¿O puedo tener algunos enlaces para aprender sobre este problema? No estoy muy familiarizado con la terminología, por lo que la búsqueda no ha sido muy útil.

Un elemento de ejemplo que se restablece es mi casilla de verificación (que está conectada al estilo de paso de línea, que también se restablece) y esto sucede cada vez que el reloj de mi sitio se actualiza con una hora actualizada a través de setInterval. También se restablece cada vez que agrego un nuevo elemento de lista a mi sitio. Espero que mi pregunta tenga sentido, gracias de antemano! Aquí hay algo de mi código si es relevante:

 const currentTime = new Date().toLocaleTimeString(); const [time, setTime] = useState(currentTime); function getTime(event) { const newTime = new Date().toLocaleTimeString(); setTime(newTime); } setInterval(getTime, 1000);

 const [isComplete, setIsComplete] = useState(false); function strike() { setIsComplete(!isComplete); } <li style={{ textDecorationLine: isComplete && "line-through" }}> {props.text} </li> </div> <div className="item-buttons"> <button onClick={strike}>-</button> <button onClick={() => { props.onDelete(props.id); }} > x </button>