En la aplicación React, tengo un código para alternar la clase del elemento html (llamémoslo elemento A) al presionar un botón. Lo hago mutando un estado que contiene configuraciones para toda la aplicación. Luego, cuando se procesa el elemento A, verifica la configuración adecuada y aplica o no la clase.

Esto funciona, pero lleva mucho tiempo volver a renderizar todo y, por lo tanto, hay un retraso entre el clic y los cambios aplicados. Así que pensé en usar un pequeño truco aquí con la manipulación DOM clásica para cambiar primero la clase (para ver los cambios instantáneamente) y luego dejar que React vuelva a renderizar todo.

El problema que tengo es que los cambios no se aplican mediante la manipulación de DOM, sino solo más tarde después de volver a renderizar. Cuando comento la línea setState , los cambios son visibles inmediatamente.

Mi pregunta es, ¿cómo lograr un cambio de clase instantáneo y qué podría estar mal aquí?

 const handleCollapseToggle = (i, el) => { const helpToggler = document.getElementById(el); helpToggler.classList.toggle('is-hidden'); console.log('test',helpToggler); const newCollapsed = Array.from(settings.collapsed); newCollapsed[i] = !newCollapsed[i]; const newSettings = { ...settings, collapsed:newCollapsed } setSettings(newSettings); //setTimeout(setSettings(newSettings), 10000); }

También probé setTimeout para aplicar un nuevo estado (consulte la última línea de código comentada), pero eso no funcionó e incluso tardó menos de 10 segundos en volver a procesarse. Además console.log('test',helpToggler) la sesión de la palabra 'test' primero y luego el elemento en sí mismo más tarde después de volver a renderizar (en la misma línea de registro de la consola).