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
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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