Lets say I have a navigation bar, and for Mobile its a hamburger menu, and for desktop its a standard nav bar with links.

I could use CSS media queries to display none for certain screen size, or I could use react hooks useState and useEffect with some event listeners.

For starters it seems way easier to create the CSS solution, but is there a benefit to either or?

I've tried both of these my question is more so about performance or what is seen as the most preferred way to achieve this effect.

CodePudding user response：

CSS media queries are generally faster for conditional rendering based on screen size because they allow the browser to apply styles directly without the need for JavaScript to execute. This can be especially important for performance on devices with lower processing power or slower internet connections.

However, the performance difference may not always be significant and may depend on the specific implementation. It is important to consider the specific requirements of your project and choose the approach that is most suitable for your needs.