React tips that help you to improve the performance and codebase.

For the past eight months we’ve been building a mentoring platform as the SEF dev team and it’s called ScholarX. The tech stack for the project was React with typescript for the frontend and spring boot for the backend. I’ve been working on the frontend for the most time. After months of work we are fully ready to launch it. In the last dev team standup we discussed to improve the performance and the code base of the project. so I’ve been assigned to research on this and I thought it will be cool if I wrote an article so that others can learn something as well.

This will be specific for our project but it’ll be useful to you as well. Let’s get into it.

With react reusability is important. By reusing components across your project you can achieve consistency and will stop you from creating huge components that will be hard to maintain. To improve the reusability of components you can use the rule of one function = one component.

return
( <div>
<Component1 />
<Component2 />
</div> )
return
( <>
<Component1 />
<Component2 />
</> )

Always use Fragment over Div. It keeps the code clean and is also beneficial for performance because one less node is created in the virtual DOM.

Sorting your imports in a JS file has a lot of benefits. First at all makes it easier to see what you imported from specific packages, also if you group them, you can easily distinguish which imports are from third party packages or local imports.

The rule of thumb is to keep the import order like this:
1. Built-in
2. External
3. Internal

import React from 'react';

import { PropTypes } from 'prop-types';
import MentorCard from 'components/MentorCard';

import pladeholderImage from '../../assets/images/placholder.png';
import colors from '../../styles/colors';

Usually when we are passing string props we use it like this,

name={“takumi”}

but instead of this we can use name=“takumi” like this.

Using restructuring makes you code clean.

Instead of this,

console.log(props.user.name)

We can use it like this,

const { user } = props
console.log(user.name)

When you are creating different views it’s always better to use a layout as your base otherwise you have to spend time writing css based on each view to keep the layout consistent.

I know this is not related to react and but most of the time this two go hand in hand. Don’t use it any type with anything if you are using any there’s no point of using TypeScript.

This one also not related to React. When it comes to interfaces and type you may think it’s the same. yeah it’s similar but the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

for example this can be done,

interface Window {
title: string
}

interface Window {
ts: TypeScriptAPI
}

but this can’t,

type Window = {
title: string
}

type Window = {
ts: TypeScriptAPI
}

Now you can choose between them based on your requirement.

These are the some of the things that's going to help to improve our code base. There are lot of best practises. In SEF we are following most of them. If you are interested in joining SEF, you can send a PR to any of our projects and you can join our discourse group as well.

With that, we came to the end of the article. Don’t forget to check out my other articles as well. See you guys at the next one. Until then stay safe! ✌️

Physical Science Undergraduate at University of Sri Jayawardenepura

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store