Necesito renderizar diferentes componentes según el tamaño de la pantalla:

Si la pantalla tiene 1012 px o menos, entonces setComponent('box');

Si la pantalla tiene 1460 px o menos, entonces setComponent('info);

De lo contrario, si la pantalla está por encima de 1460px, entonces setComponent('ambos');

Así es como lo estoy haciendo actualmente:

 if (typeof window !== 'undefined' && showComponents) { window.matchMedia('(max-width: 1012px)').addEventListener('change', (event) => { if (event.matches) { setComponent('box'); } }); window.matchMedia('(max-width: 1460px)').addEventListener('change', (event) => { if (event.matches) { setComponent('info'); } }); window.matchMedia('(min-width: 1460px)').addEventListener('change', (event) => { if (event.matches) { setComponent('both'); } }); }

Antes de esto, estaba usando window.innerWidth, sin embargo, leí que matchMedia es una mejor solución para esto. Pero mirando el código anterior, no estoy seguro de si hay una forma más limpia de escribirlo. ¿También es necesario eliminar los oyentes?