When to use REACT and when NOT to use REACT

Hi everyone, I’ve been studying react lately and it’s confusing, amazing, difficult and intriguing… somewhere between AWESOME and “what in the world is going on” with “states”???

Anyway, I thought I’d start a topic on when to USE and when NOT to use REACT.

This is more of a question for me and it started when I read this article:

I’ve also been reading/watching and learning modular programming and javascript modules using DOM caching, event binding etc… javascript prototype models…

So far from my limited understanding… what react has effectively done is:

  1. instead of DOM caching in modular javascript… it has created a “virtual dom” that lives in javsScript instead of on html since the “DOM is REALLY SLOW”… and from here with some js wizardry… it can compare changes in the “Virtual DOM” so it only “renders” what needs to be rendered in the actual DOM…

best case scenario of this feat would be this you tube video I found where they rendered over 500,000 <li></li> elements

  1. TO CREATE new COMPONENTS:
    REACT is basically using an Object.create feature of the prototype model of javaScript modular programming… so the parent-child flow of information is a flow of this prototype model using Object.create… and then it just assigns each new module to a new div id…

Now when not to use REACT?
I found this article:

https://objectpartners.com/2015/11/19/comparing-react-js-performance-vs-native-dom/

so It seems that REACT.js has some performance costs?

I really like learning react… and I guess learning react with basic small components (which could otherwise be rendered more easily with simple vanilla HTML) is the best way to do that…

However, in production… what are the use case and non-use case scenarios for this awesome feature? when is it a great tool and when am I just using the latest Buzz word/framework in the javaScript world (but actually overburdening my code)?

Another problem I’m seeing with react is “encapsulation”. It’s great since (CSS) does not leak all over the place until I wonder about WHOLE PAGE/WEB lay out changes which could easily be fixed by a simple SASS update… from what I’ve read… REACT likes all its styleing inline (kinda like email templates?)…so how about css animations? that already work natively with the DOM?

My current idea I guess is…

  1. for simple one page apps:
    regular js with modular js patterns? modular, prototype? maybe pubsub methods?
    we probably don’t need react if you’re just gonna render 50,000 things as shown in the early video…

  2. for large complex apps… I guess that’s when react comes in but when exactly?

Maybe those with more experience can put some insight as to when REACT is NOT the best approach?

Still liking REACT though… just don’t want to end up using it for the sake of using it…

Thanks again!

4 Likes

Hey great thinking! On my phone so I can’t respond in depth, but my personal view about ‘Oh React is the new buzzword hottest framework’ — Well, it was in 2013 when Facebook open-sourced it after having used it in production for several years at that point. Now it’s 3 years AFTER that… React has clearly secured its place in the front end world… Maybe it’s not the solution for everything, but it’s quite good for many problems and has definitely matured out of a buzzword.

Hi, thanks for the reply…just wanted to create a kind of forum where people could add insights on how to properly use react based on their own “experiences.”

Another thing I realized, like in the you tube video of rendering 500,000 <li></li> elements… the reason why react made it work so well was they used a technique where react rendered only the <div> that could fit in the current window. I think that’s a crucial consideration.

When I started, I thought that just converting every div/element into a react component would magically make a website load faster… actually it seems it doesn’t…

Rendering a static site with react components would be just the same as using regular html since the same static dom would be rendered… only when using React in the method showed in the video will React truly shine… and only at 500,000 elements… Computers and browsers are getting more and more powerful…5,000 to 50,000 elements won’t benefit so much but obviously the 500,000 elements can benefit from the “react/render divs that only fit the current browser window technique”.

So even if we converted an entire web site using react components it still won’t leverage the performance boost of react unless used in this way (referring to the render divs that only fit the viewport/screen size).

Still, being able to reuse react components within other components is awesome! I’m hoping as we all learn more about react… we can all add to this list about “best practices” on how to use such an amazing library…

I’m beginning to realize that React is not a magic bomb/pixie dust that magically optimizes my code so it can “fly” but if used properly it can act like ROCKET FUEL hehehe… hope we can all share more user insights and use-case scenarios.

Thanks again.

addendum:
Another question I’m pondering regarding react… again after learning about javascript modular programming… How does it handle memory leaks? Since the virtual dom is now all in javaScript… when you create an event handler for this virtual dom… that isn’t rendered… does react automatically turn off the event listener or do we have to code that in? It just dawned on me… react has just saved us the large problem of a slow DOM but has it instead created a memory leak of numerous event Handlers on imaginary virtual doms? Will try to read up on this… any ideas are more than welcome…

I think any real site that is more than a landing page would benefit from using react. I can not really think of something I would want to make that will take more than a couple of days and not use react.

When I first started my react roguelike project I did inline css for a while. I struggled to figure out how to do animation so it was pretty much not animated at all. Then I read something saying to just use CSS like you would without react and instantly my CSS problem was fixed. I also think inline CSS is a very very bad idea for the same reasons inline HTML is a bad idea. It is just another reason to go back to how you would CSS without react, well if that is using SASS.

I did use inline CSS in one spot in my react redux roguelike project’s bar component. The reason I used inline CSS there though is because for some reason normal CSS was not working. So I used let barStyle = {width: formatBar(current,max)}; to make sure the bar was filled the appropriate percent. Its been a while since I wrote that line of code though so I do not really remember what I got stuck with that forced me to inline the css there.

I have also read that Google takes website page loading speed into account on search rankings, although not much but it is another reason to use react.

1 Like

As the “Stop Using React” article says " If you have a highly dynamic application that needs to re-render frequently" this is a good use for React.
I watched the FB video on why they created React, and the use case was for a bug they could get past with their messaging service.

Thank you for sharing. So using CSS as usual without using react’s encapsulation feature (using inline styles) is the better approach? especially for custom animations? I was actually wondering about this or how to more efficiently implement encapsulated css animations… thank you for enlightening me. I’ll keep to regular css and use react specifically for rendering dynamic “content/text.”

Addendum:
Back to inline styling… found something interesting…

and

still the question on css animation remains

so I found this…

so maybe inline style animations with react can work…

Thanks for replying. Totally agree. Yep react seems perfect for re-rendered parts so great for updating status walls and message boards…

1 Like

I’ve been doing more and more react code in atom. the linter for jsx is deprecated and the react add on requires github for windows… I already have git running from command line… don’t want to add more git to my system… any suggestions on a good jsx react linter for atom? thanks.

I think this is good post!