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...
For further actions, you may consider blocking this person and/or reporting abuse
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!
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.
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
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?
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.
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?
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
oh got it. Thanks a lot for explaining brother :)
window.onresize gonna fire every time if you can incorporate debouncing that would be cool
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.
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
Would love to see the same or similar thing done with useEffect hook 😁