Image by https://dribbble.com/kunchevsky

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 yoursite.com/404
  2. Show Page not found content with requested URL.

Redirect to yoursite.com/404

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…


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.

Links

Portfolio: https://naveenda.github.io/

Source Code: https://github.com/NaveenDA/naveenda.github.io


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…


Introduction

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.

Introduction

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.


Quick Summary

If you are working a project with more than 2 developers, you might note different formatting code create different kinds of issue like merge conflicts, code unreadable, etc. To avoid such cases, we can set up git hooks that format the code before the push into the remote server.

Let’s start

For the simplicity purpose, I am gonna use a simple react application that creates by using create-react-app.

Setup the Git hooks

Git hooks are basically kind of event listener, you can any git events by using Githooks.

In the Javascript world, Husky makes Git hooks as easy 🐶 woof!.

Let’s install the husky in our…


Quick Summary

When rendering the large set of data, we all facing some issues related but the big companies do something to avoid such things to affect their application performance.

When you have to render a list of more than 25000 records you notice a significant performance delay on your React application even you are using cutting-edge technology like react, babel, typescript, chrome, etc.

Let’s start rendering a list that contains 25000 records

Now your application starts being to slowdown while rendering this component, now you have 3 options to effectively render this

  1. Pagination
  2. V-DOM based Rendering

Remember

Your user can’t able…


Integrate MJML With NodeJS/Express Application

Quick Summary

When you working with e-mail content you will know the rendering the e-mail in all mail client is a harder job than writing a JS framework. But MJML takes care of that job and work like a pro.

MJML

https://mjml.io/

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