4 ReactJS Tips To Make Your Code Lighter, Faster, & Better
React has a lot of different ways for it to be used amongst developers. There may not be a consensus on how it should look or be implemented overall because everyone has their own rendition.
Other programming Medium authors may tell you to code this, not that. This is not my way. I’ll give you the tools but ultimately you are the one painting the picture.
Here are my 10 React AntiPatterns that you should avoid/implement when coding in ReactJS. These are tips of helpful use cases for React as well as implementations to avoid. Without further delay, let’s jump in.
#1 — Start With One Big Component
My first tip starts off by making sure we aren’t over-optimizing our React code. That means that we aren’t making components left and right. We only make what is necessary. To do so, I recommend that you start by building your React application all at once in your primary App.js component like so:
Once you’ve gone ahead and built the whole application out you’ll be able to clearly see what pieces of code should be extracted into its own component, what gets repeated, what can utilize props, etc.
To extract a piece of code into its own component, use the VS Code extension called Glean:
#2 — Nesting Components
I’ve made this mistake myself so many times because it feels so intuitive. The typical situation is that you are nesting a child component within a parent component. Take a look:
In this situation, every time your Parent is rendered it will also render the Child component which creates a new memory address. This could lead to performance issues down the line which is a headache to solve later on.
The solution is just including your Child component outside of the Parent component, and rendering it inside the Parent component using props like so:
#3 — Store Each Component In Its Category Directory
For organization purposes and ease of use, i’d recommend storing each component in its own directory that is categorized by the component itself. For example, you’d have a Navbar directory that stores the Navbar.js file, any images related to Navbar, CSS, typescript, etc. That’ll look something like this:
Here is the way I organize my files:
#4 — Avoid Pointless Divs
Often times, to have parent elements exist in a function you have to store them in a Div. With React, you have the option of using <React.Fragment> to replace Div’s entirely.
A compulsory rule in React is that your JSX needs to have one parent element. There are some good reasons for this, but for brevity we won’t get into it in this article.
So that’s where Fragments come in. Fragments allow you to create a parent element, without actually creating an extra redundant node in the DOM.
That’s it!
