Tengo una página en reaccionar, donde tengo que cuando el usuario está en un tamaño de pantalla de escritorio, muestra ambos componentes juntos, pero en pantallas más pequeñas muestra solo uno con la capacidad de cambiar. En este momento estoy usando un enlace personalizado que devuelve un escritorio llamado booleano (verdadero si el tamaño del escritorio, falso si no). También estoy usando una variable de estado para rastrear el cambio entre componentes.

 {!desktop ? switch ? <>{List}</> : <>{Map}</> : <>{Map}{List}</> }

Al cambiar entre escritorio/no, restablece el estado en ambos componentes. Entiendo que esto es lo que se supone que debe hacer el código anterior, porque está representando una nueva instancia del componente.

Mi pregunta, ¿hay una mejor manera de lograr el resultado deseado con un renderizado condicional diferente? Y si no, ¿hay alguna manera de preservar el estado cuando el escritorio cambia? ¡Cualquier ayuda sería muy apreciada!