Tengo una barra lateral en la aplicación web y cuando el cursor se desplaza, la barra lateral se expande y cuando el cursor sale, se colapsa. Adjunto la captura de pantalla de mi consola en 15 segundos. Pero mientras se desplaza, todas las partes del estado de la barra lateral continúan cambiando. ¿Cómo puedo dejar de continuar con la renderización de componentes? Aquí está el código y también puedes verlo en la consola. Enlace CodeSandbox

 const [state, setState] = useState({ sidebarClass: '' }); const onHandleMouseOver = () => { setState(pre => ({ ...pre, sidebarClass: 'expend' })) } const onHandleMouseLeave = () => { setState(pre => ({ ...pre, sidebarClass: 'collapse' })) } console.log('component re-render') return ( <div onMouseOver={onHandleMouseOver} onMouseLeave={onHandleMouseLeave} className={`App ${state.sidebarClass}`} > </div> );