Don't be one of these React Devs🙄
Tags: react, javascript, typescript, webdev
Published: 2019-11-10 17:41:21

I have been working with React for a couple of years now and I have seen stupid practices that developers do while working on a React App. In this article, I will list some of these stupid stereotypes and try to explain why they are wrong.
Without wasting time lets start judging😋

##**The one that knows React but not JavaScript:**

* Sometimes people ignore learning JS and rush into React.
* Remember💡, React is a JS library and you have to make sure you are thorough with it. One step at a time does help.
* I would recommend learning these JS concepts and some DOM APIs mentioned in this [comprehensive list](https://github.com/leonardomso/33-js-concepts).

##**The one who Uses JQuery with React:**
![React+JQuery == Pineapple+Pizza](https://media.giphy.com/media/W08g7o5V6Dk6ru1q9y/giphy.gif)
* I have seen a bunch of people using JQuery along with React for DOM manipulations😑.
* It's just pointless, React's main goal is to handle all the DOM changes.
* All you have to do is update the state, render the VDOM and React will take care of all the DOM changes.
* If you used JQuery and React together, then you should expect some bugs that are hard to debug🙈 as both libraries might update DOM elements at the same time.
* Still, If you'd like to continue using JQuery here's a [guide integrating it the right way](https://reactjs.org/docs/integrating-with-other-libraries.html).

##**The one who complains that React Apps lag**
* React technically is blazing fast, but everything can become slow if implemented the wrong way😏.
* Think of it, React takes care of all the DOM manipulations. To achieve it, it needs to compare the whole DOM tree and update it, which is a very tedious task🥴.
* The more the number of DOM elements in your App, the slower the APP will be.
* Team React has been doing their part of keeping React performant as possible. [React Fiber](https://www.freecodecamp.org/news/lets-fall-in-love-with-react-fiber-90f2e1f68ded/) was a major change!.
* But as a developer you have to do your part right, [here's a guide to optimize application performance](https://reactjs.org/docs/optimizing-performance.html). 'Avoiding Reconciliation' is one of my favorites🤩.
 

##**Mr. LibOverflow😷**
![Mr. LibOverflow](https://media.giphy.com/media/3ohs7LtFnEznzAIzvO/giphy.gif)

* These are the guys that just try to get around writing code
* They will use tonnes of component libraries just to get their task done.
* Adding too many packages to your app can increase the overall build size.
* You should keep track of the build size, or else the initial app loading would be slow🐢.
* [Webpack bundle analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) should help you analyze which package you should be ripping off.
* Also external packages are like Magic in your code. Nobody reads how they are working.
* At times they might blow up and you might not understand what happened, KEEP THE MAGIC TO MINUMUM, KNOW YOUR CODE!🤓

##**The one that thinks Redux is must**
* You need to understand that React is a View Library💡.
* How you manage your state is none of its concern.
* I don't suggest Redux to beginners, as the learning curve gets steep.
* There are tonnes of other state management solutions out there, each with their pros and cons.
* Or you can just simply use React [hooks](https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c) and [context](https://itnext.io/react-context-and-state-management-16ed76686803).
* If you are using GraphQL, I would suggest [Apollo](https://github.com/apollographql/react-apollo). I liked their caching algorithm.

![](https://images.app.goo.gl/YmZgDERQ8xFQHn7t5)



Thank you for reading, I hope you liked this post😄. I'd love to hear your thoughts on this, so please feel free to comment!