I want to talk about something different today. I want to share some tips and strategies that will help you write cleaner and better code in react.

Most of what I’ve written or will write in the future are about things I found difficult when I was learning to code.
As a self-taught Developer without a mentor, one of the things I found difficult was writing a clean code in react.
I know I had to get better. But how?
So I came up with a solution. Find 5 respected and professional react developers, go to their GitHub repo and find a common thing or/and pattern in their react project.

I was not trying to compare my code with anybody’s. I just want to find out what these so called professionals add to their code, how they implement somethings, approaches they take and why.

As expected, things started popping out, things that are missing in my code and present in all five. Everything started to make sense. For example why add prop-types to your workflow when it’s not required.

TL;DR

From that day, I started including all what I learned into my workflow. And believe me, that helped me understand react and made my code not-so-newbie-like.

Enough with the talking. I will share some tips that learned from my research and also those that I learned via projects and experience.

Here are they in no particular order.

1. Prop-types

If you’re new to react, you might not know what’s prop-types. However those that have been working with react have at least seen or work with it a couple of times.

What’s prop-types?

Basically, prop-types is a module/ package or whatever you’d call it that provides type-checking to our props.
Let’s say for instance, you are expecting an object prop from a parent element, and for some reason you receive an array. That will cause a total chaos to your app , right?
Here’s where prop-types come into the picture. You define what type of prop you’re expecting and if you pass something contrary, it’d throw an error.

const App = ({title, id, isCompleted}) => {  
//  
}  

App.propTypes = {  
Id: PropTypes.number.isRequired,  
title: PropTypes.string.isRequired,  
isCompleted: PropTypes.bool.isRequired  

}

In the above code block , we have a component, app, that receives three props — title, isCompleted and id. And below, we defined our prop-types, title should be a string, id should be a number and is isCompleted should be a Boolean.
If we receive something contrary to what we defined, we’d get an error. That’s the basic use case of prop-types. It can gets little complicated, but with time you’d learn.

Here’s the link to the prop-types docs

2. Use functional components and hooks instead of classes.

Okay, this one is a little controversial. Some might agree with me, and others will not. I have used classes and lifecycle methods and if I have something to say regarding them, it’d be positive.

However, functional components and hooks are the future of react. React is making everything more favorable for hooks ( the react dev tools will back that claim).
In my opinion, if you’re starting a new project, use hooks and functional components, but for existing codebases built with classes, don’t refactor.
I personally like functional components. I mean, they are cleaner, elegant and simpler. Adding them to your workflow will significantly clean your code and make you a better React developer.

Using functional components and hooks shows that a Developer can adapt to the ecosystem. Couple of months ago, I was given a take away coding test by this company I was applying for a job. I did the whole project with hooks and the interviewer was pleased because “I am up to the trend”.

• * I will Soon be writing a tutorial on advanced hooks soon **

3. Make your components small and reusable, but don’t over abstract.

One the main feature of react is having everything in a component. Components in react are equivalent to Lego blocks — small chunks of code that build an app.

Your components should be relatively small. For example the send section of WhatsApp is a component right? Inside that component, there’s the send button component, voice message component and the text area component.

Everything is broken down into small, simple Chunks of code. components should not only be small but also reusable. I’m not saying all components should be made reusable, only components that you know you’re going to use again in another part of your application. A good example of a reusable component is a button.

If i want to create a button component, I will make it generic as possible. The size, color, Border-Radius will all be passed down as props.

That been said, you shouldn’t over abstract your component. By over abstraction, I mean making all or most of your component generic.
Remember, A generic component is a component that you’re sure you’d be using it in more than one place.

4. Destructure props. No more props.whatever.

This is one of my findings from the research I conducted. So before the research my code was like

const myApp = (props) =>{  
 /// <h1>{props.title.heading}</h1>  
  onChange={props.onChange}}

Yep, ugly a** looking, I know. I can’t recall the last time I did that though. Here’s what I do now.

If the props is just one level deep

const myApp = ({title, onChange}) =>{  
 ///  
    Const {heading}= title <h1>{heading}</h1>  
  onChange={onChange}}

And if it’s nested, for example redux state I do something like this.

const myApp = ({chat:{messages}, settings:{themes}}) =>{  
 ///  
    Const {sentMsg, recievedMsg}=   
    messages  
    Const {dark, light}= themes <h1> Theme color {dark}</h1>  
   <li> {sentMsg} </li>}

Obviously, destructing is prettier and cleaner than doing the props.title…. thing.

Destructuring cleans your react code and make it very readable and once again clean.

That’s it guys! I hope you enjoy it and learn something from it.

Please be sure to read the rest of my blog, and if you enjoyed this article, please spread the word. Thanks!