An in-depth guide on how to choose the perfect npm package

Photo by cottonbro from Pexels

React is simply great. It’s popular and performant. But an important aspect of React is that it doesn’t come with all of the solutions packed in.

That’s why we need to search for additional libraries which can be both good and bad. If you are a beginner, then you have to spend a considerable amount of time searching for the best solution to a problem.

Today we will have a comparative discussion to learn more about the alternative solutions to different problems in react

1. Global State Management

Sharing state between components is mandatory in 99% of the applications. …


Practical advice for improving code quality

Woman with index finger over mouth
Photo by Diana Polekhina on Unsplash.

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


Practical advice for designing REST APIs

Rest API Design Best Practices
Photo by Andrea Piacquadio from Pexels

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…


Habits that make the difference

A man sits at a laptop coding.
Photo by Danial Igdery on Unsplash

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:

Bad example

But in the React documentation, they…


If you’re writing enterprise-level code, you need to know this

Photo by Dan Dennis on Unsplash

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…


Which one should you choose for your next project?

Photo by Vera Arsic from Pexels

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…


Drastically improve the user experience with less code.

Photo by Wendy van Zyl from Pexels

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…


18 best practices to keep names simple and consistent

Photo by Lukas from Pexels

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. …


A Technical Postmortem of a Real-Life Crisis

Photo by Andrea Piacquadio from Pexels

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. …


Can you handle these ReactJS questions? Let’s find out!

16 interview questions for next level react developers
Photo by Ryan Stone on Unsplash

Answering a conceptual question in an interview doesn’t mean you will be better than others on the job, but it surely means you have the time and interest to understand the deep concepts in a framework.

One’s understanding of documentation separates a good developer from a great developer.

Well, today, we will look into some of these conceptual questions that you may want to know as a React developer. If you are looking for simple syntax-related questions, then this article is not for you!

Let’s get started!

1. What is Render Hijacking in React?

As Mr. Google says, Render Hijacking is

“The concept of render hijacking is…

Mohammad Faisal

Passionate about Clean code and SOLID Architecture

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