DEV Community

Cover image for Project 41 of 100 - Writing Responsive CSS in JSX

Project 41 of 100 - Writing Responsive CSS in JSX

James Hubert on January 30, 2021

Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to re...
Collapse
 
hasnaindev profile image
Muhammad Hasnain • Edited

I have to give my honest opinion. This is extremely bad. First of all you should never use objects for styling because whenever React runs the reconciliation algorithm to detect changes, it will obviously make a new copy of the virtual DOM. This means it will create a new object and compare references. It will re-render the component each time and not only when it hits the media query.

Stick to CSS/SCSS!! Or simply use a library like JSS or styled components instead (for dynamic styling). Maybe you are a beginner, which is okay, you are trying things but just keep these things in mind. Keep hustling!

Collapse
 
jameshubert_com profile image
James Hubert

No worries Muhammad I’m trying to do a react project each day so obviously going for quantity over quality. Others have complained about not having useEffect in the component which would obviously re-render the component less often.
Just curious about what you said-
“ whenever React runs the reconciliation algorithm to detect changes, it will obviously make a new copy of the virtual DOM”- does it make a whole new copy of the virtual dom or does it just re-render the component? I thought one of the main value adds of React is that it won’t re render the whole dom when it detects changes in a component.

Collapse
 
hasnaindev profile image
Muhammad Hasnain • Edited

Virtual DOM is an in memory representation of the actual DOM. React creates a second virtual DOM and both of these exist in memory at this point, after "diffing," it only updates the part of actual browser DOM that needs to be updated.

Also, about not using useEffect, each time this component is re-rendered, the code actually keep on adding more event listeners. This is a very good example of memory leak. :D

Collapse
 
developeratul profile image
Minhazur Rahman Ratul

One thing I don't understand is if I don't write a stylesheet in JSX, what if I write in Sass or Css? What is the difference between them?

Collapse
 
jameshubert_com profile image
James Hubert • Edited

Hey Ratul- You can and should have separate style sheets. You import them at the top of the page like so:

import React from “react”;
import “./myStyles.css”;

My blog post is just if you want dynamic styles and can’t use media queries :)

And even then, most of the time you just change the class. You would write the styles for two classes in your style sheet like “.dark-mode-on” and “.dark-mode-off” and then in your JS file toggle between giving the JSX element one of the two classes.

Collapse
 
johnyepthomi profile image
JohnYepthomi • Edited

Worst thing about react is that styles are effected from any CSS files that matches the elements even if it's not from the CSS intented for that component. Like style leak. And we have to resort to styled components and crap. Is there a way to tie a CSS to a component without leaks?

Thread Thread
 
betoshiver profile image
Alberto Shiver

Yes, there is an easy way, you can do CSS modules, (styles.module.css) that way it'll only take the styles from the specified module even if another module had the same class name.

When you declare a className on a jsx component it goes like this example:

className ={module1.btn}

It'll only apply the styles for btn that are declared on the module1 module

Collapse
 
developeratul profile image
Minhazur Rahman Ratul

oh got it. Thanks a lot for explaining brother :)

Collapse
 
palashgdev profile image
Palash Gupta

window.onresize gonna fire every time if you can incorporate debouncing that would be cool

Collapse
 
jameshubert_com profile image
James Hubert

You mean on every resize or every component load? I think either one is ok. I’ll check into this though- maybe you’re right.

Collapse
 
palashgdev profile image
Palash Gupta

yup it impact the website performance also

but there is another cool thing Resize observer

developer.mozilla.org/en-US/docs/W...

check this one out

Collapse
 
morganjay profile image
James Morgan

Would love to see the same or similar thing done with useEffect hook 😁