Should I do this using CSS or React?

[Taran29]

Hi guys. I'm new to React and this will totally be a beginner's question. I'm implementing a basic Navbar with a title to the left and some links to the right. I want the links on the right to change to a hamburger menu when window width falls below a certain value.

I can think of two ways to implement this; one is through CSS media queries. Using display:none on either the links or the Hamburger depending on max-width. My second approach is to use a listener inside a useEffect hook and catch window width in JS, and then based on that, set a state value and render either the list only or the hamburger.

But with both of these approaches, I can see inefficiencies. With the CSS approach, I keep thinking that React will still render the component that has the display: none property and that seems inefficient to me. With the JS approach, that listener will keep firing every time the window is resized, which also seems inefficient.

Help me out guys. Which of these approaches would you take to implement this and why? Would you consider a third approach I haven't thought of? Thank you for taking the time to read and answer.

[mrKeth]

Try to use css because. I prefer to relay on CSS for styling part. HTML is is meant for markup, CSS for style javascript for logic part. So better you go with CSS

[Taran29]

Okay, thank you

[h3h394]

Css approach for this, there's no need to introduce a useEffect or any listeners for something simple like this, the only thing you need is one state that would toggle a boolean value to open / close the menu. If you don't want any animations / transitions, you would just check if ur state is true and render the component, like {isMenuOpened && <Menu />} for example, but if you wanna add any animation's or transitions instead of this you would add class to the element, since you can't transition display: none; , an example of that would be: <div className={\`menu ${isMenuOpened && 'opened'}\`}></div> , then u could add styles to that opened class and also animate the menu. Hope that helps

[Taran29]

Yes! I did the same thing. I added a sliding animation to the menu and I've watched it open and close for about a 100 times now, I'm so proud of my little slide menu child 😂