Do you care about unneeded components when creating responsive UI ?
Some time ago I was writing an application using chakra-ui. There was available hooks/wrapper like useMediaQuery which allowed to render/not to render components based on viewport sizes.
Right now I started to write an application using tailwind css. There is media query of course but sometimes I am feeling like I am missing useMediQuery hook. For example - on desktop i have search bar but on mobile i have drawer with search criteria inputs. So in case of desktop/mobile even if I use display:none on the component this component still will go through whole reactjs process and consume user's processor and memory.
So maybe premature optimisation, but what do you think ? Maybe we should not render components which we do not need it instead of using display: none ?
1 Reply
Well, I personally prefer to serve/render the HTML based on client's device type to solve this problem
I use laravel's jessenger package which fetches that data on the server
it's more coding but you will end up with a tailor-made UI for each breakpoint