React is very unopinionated about how things should be structured. This is exactly why it’s our responsibility to keep our projects clean and maintainable.

Today, we will talk about some best practices to follow to improve your React application’s health. These rules are widely accepted. As such, having this knowledge is imperative.

Everything will be shown with code, so buckle up!

1. Use JSX ShortHand

Try to use JSX shorthand for passing boolean variables. Let’s say you want to control the title visibility of a Navbar component.

Bad

Good

2. Use Ternary Operators

Let’s say you want to show a particular user’s details based on role.

Bad

Good

3. Take Advantage of Object Literals

…

Ever got frustrated with a horrible API where everything’s a guessing game? Well, I have.

In this world of microservices, a consistent design for your backend API is imperative.

Today, we’ll talk about some best practices to follow. We’ll keep it short and sweet — so buckle up!

First, Some Terminology

Any API design follows something called Resource Oriented Design It consists of three key concepts

• Resource: A resource is a piece of data, For example, a User.
• Collection: A group of resources is called a collection. Example: A list of users
• URL: Identifies the location of resource or collection. Example: /user

1. Use kebab-case for URLs

For…

Getting the job done is the most important thing in software development. But how do you separate yourself from others? Well, from my experience, I can say the difference is in the approach.

Over the years, I’ve worked with a number of React developers. Here are some things that separate a great developer from an average one.

1. They Don’t Use Index as the Key

When we render a list, usually we get a warning saying that we need to provide a key for each list item. We lazy people often use the index as the key.

Something like this:

But in the React documentation, they…

Over the years I have had the privilege to work on some large-scale react projects. Today I am gathering some essential things to keep in mind when building a new project or enhancing the functionality of any large scale application.

We will start from the absolute basics and then go deeper. So buckle up!

1. Project Structure

When I started with React it was intuitive for me to keep files by their types. Bus as I had the privilege to work on some larger projects I understood how difficult it can be to navigate through your files as any project grows bigger

Take…

Most modern web applications are dependent on some external data source. And in React, we generally use fetch or axios to get the data from the remote endpoints.

However, these 2 libraries only do so much. We still need to implement the loading state, error handling, caching, pagination, re-validation all of these things ourselves.

But there are 2 popular libraries for solving these problems. They are:

React Query

According to the documentation what this library offers are

Fetch, cache and update data in your React and React Native applications all without touching any “global state”.

Another library is

SWR

This library recognize itself…

If you are a React developer, you must have wished of having a library for managing all the API calls.

I am not talking about fetch or Axios. Rather a library to manage all the loading state, prefetching, caching, pagination, validation, etc.

Well, I have good news for you. Today we will explore a package named SWR. Which recognize itself as React Hooks for Data Fetching .

Let’s see how what this library can do for us and when we can use it.

STEP 1: Install Dependency

You can install it just by typing

yarn add swr

Step 2: Create a Fetcher function

You can use all kinds of fetcher…

No matter what kind of developer you are, every once in a while, we come across an API which returns data in such a way that we don’t have to spend much time understanding it.

But generating this type of clean and consistent result takes time, effort, and experience. Today we will take the first step towards designing a clean database.

We are keeping it short and to the point. Let’s start

Some Terminology

Table: this is a collection of data

Primary Key: This is the unique identifier of a table

Attribute: means property of your data. …

Last Friday, I received a call from my friend (who is also my business partner). Some customers called him, saying that they were not able to see any data on their dashboard.

“Are you sure that they can log in?” I asked my friend.

“Yes, they can but don’t see anything after logging in,” he replied.

He is not technical and there was no developer to call at it’s a holiday in our country. He asked me to investigate the issue.

That’s how it started…

Possible Reasons

I have faced enough similar situations in my previous jobs. …