With the scale at which the applications are working today, caching is all over and most of us are already familiar with it. It is very common for all CPUs, browsers, Web Apps, Mobile Apps, DBs to maintain their own cache. As per Amazon, “1 second of load lag time would cost Amazon $1.6 Billion in sales in a year” or for Walmart “When the load time jumps from 1 second to 4 seconds, conversions decline sharply. For every 1 second of improvement, we experience a 2% conversion increase”.

It is important to have a caching layer to ensure blazing…


And it’s huge this time, Get Ready!

React 18 changes are huge as it is focused on user experience and internal architectural changes. React 18 adapts an opt-in adoption strategy, which will enable devs to upgrade to React 18 with minimal or no code changes.

Installing React 18 & Upgrading

To install the latest React 18 alpha, use the @aplha tag:

npm install react@alpha react-dom@alpha

The official specific dates are not out yet but the release will happen in this order: React 18 Library Alpha → React 18 public beta → React 18 RC → React 18.

Upgrading on the Client

To upgrade to React…


“Give ordinary people the right tools and they will design and build the most extraordinary things.” — Neil Gershenfeld

Visual Studio is one of the most popular IDEs very powerful because of its rich & powerful extension environment which comes from its Marketplace. It provides all the features of both lightweight & heavy-weight IDEs. As a developer, IDE is your bow & extensions are the arrows.

I’ll be targeting extensions useful for web developers but this will also be helpful for others. The extensions I have mentioned are the ones I have used and found amazing. …


This article is in continuation to my series on configuring Webpack and babel for your react app. Please find part 1 here and the Link to the GitHub repo

Loaders: Introduction

Loaders are nothing but the transformation applied to the source code of a module. They are used to handle build steps and acts as a build tool. They have a wide variety of use cases like Converting TS to JS, Loading CSS, loading inline images as data URLs.

Also as webpack would only understand JS so loaders help us convert various assets to JS.

Loaders follow the module resolution & are…


Setting up webpack may seem daunting 🤢 if you are new to it, but my aim behind writing this article is to make it simple for you. This article will be split across parts in which we will be going from zero to hero 😎

Link to GitHub Repo: https://github.com/AbhishekGautam01/webpack-react

create-react-app(CRA) comes really handy to set up a react app with a ton of predefined templates that are wildly popular amongst developers. …


In ES2015 (aka ES6) for the first time a native JS module system was added but the main problem with this is that it is static import meaning it can’t be changed at the runtime and also all imports need to be resolved before JS could execute any code which I feel sucks.

In ES2020 the TC39 approves the proposal for dynamically importing modules. So now instead of having all imports at top of the file, you can import modules whenever required. However, this feature was supported by webpack.

The major benefit which we can get from dynamic imports is…


Introduction

Since hooks were introduced in React a lot of things have changed from the conventional approach. Due to the capabilities of Hooks, we have redefined how we used to approach certain concepts in React. The intent of this post is to explore possibilities for improving routing experience using Hooks. Here we will be talking about React Router and HookRouter modules.

React Router

It’s a very popular declarative way of routing in react. It takes away the pain of manually setting and configuring routes for all pages. It uses 3 major components to help achieve this — Route, Link, BrowserRouter

Routing in React Router

To define a…

Abhishek Gautam

A tech geek who loves to solve problems and coming up with meaningful, simplistic solutions.

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