Image by

A 404 page is what a user sees when they try to reach a non-existent page on your site (because they’ve clicked on a broken link, the page has been deleted, or they’ve mistyped a URL).

I am assuming you are using React Router. You have two options to show page not found component

  1. Redirect to
  2. Show Page not found content with requested URL.

Redirect to

In Order to redirect you need to import Redirect from “react-router-dom”. Place the redirect code at the very last path of your routes.

Now you App.jsx look like

import React from "react";
import { Redirect, Route…

Quick Summary

I was working on my portfolio by using next.js on the Github pages, I face some issues while deploying the projects. So I decided to write a blog to help others.



Source Code:


React is not a full-fledged framework so it doesn’t care a lot about things like routing, network call, etc.

In the React environment we have plenty of options for pretty much everything. For the network also we have plenty of options like fetch ,axios , react-http-client , etc.

Among others, the Axios provides plenty of features like global-config , Interceptors , better error handlers, etc.


Axios is the promise-based HTTP client for the browser and Node.js. Axios provides a lot of features to make the HTTP network call for your React application.

Browser support

Axios have excellent browser support including IE11. So…


I have 5+ years of experience in the professional web development environment. For the past 8 years, I have collected plenty of websites/tools, which is improved my productivity and reduce my work stress by doing smart work.

In this article, I am sharing the list of websites, that I personally use to improve my productivity. I am not going to say, these are the best website out there to improve web development but it helps a lot to improve my web development carrier.

In the new Information Era, data is considered as the gold/oil, so if you have data then…


Unlike Angular, React doesn’t come with its own fetching library. So the developer came with their own implementation to fetch the data from the server. But the problem is, it is very hard to code the caching based fetching system to effectively avoid network call duplication.

So they are choosing a very simple library to fetch the data like fetch, Axios, etc.

React Query

React Query is often described as the missing data-fetching library for React. It fetches the data to the server with its own caching mechanism.

It comes with its own Developer tool called ReactQueryDevtools

What is SWR?

SWR (State While Revalidate) is a React hook used to fetch data from the server. The SWR provides the data from the cache and then make a server for validating, once it has done it combines the data for data consistency.

We can install the SWR by using the NPM install command.

npm install swr

How to use it?

The SWR is a simple React hooks and it returns data as well as error in the object model.

Here is the example is taken from the official website.

Features offered by SWR

SWR provides plenty of features for performance, correctness and stability to build your application with…


React 17 got released a few ago with no new features but still, you need to upgrade your react version because React is developed by the community. So that testing should be done by the community.

Create React App supports React 17

A few days ago create-react-app 4.0 is released with a bunch of improvements including the react-17.

This is a good time to upgrade your react version.

You might know that the react-17 has no features for developers but still, you need to update you existing react version to 17.

No Features? Why Need to Update?

A react is not fully maintained by Facebook, it was also maintained by the…

I am an average developer who visited the Stackoverflow and Programming Humor on a daily basis for some work and relax.

I could see a lot of curation for the best StackOverflow questions for the month/week, but none for the best Programming Humor Meme. So I decided to curate one.

Here are the Top 30 Fresh (Not Unique: Same Concept but with different Templates) Memes from the Programming Humor on the Month Oct-2020

1. These professors need to slow tf down.

2. “Just cache it

React Performance Tips

Quick Summary

When you see the react application first painting timing too high in Lighthouse Performance report, you can easily improve by using react-snap.


I was working on the react PWA application, during the lighthouse audit I was just checking the other options in the Lighthouse studio due to the Curiosity.

Naveen DA

I am developer who loves ReactJS and Economics.

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