Image for post
Image for post

A step by step introduction into the world of bundling JS apps.

webpack is one of the most famous bundlers out there with rollup. You might be using it without even knowing it, for example, Create-React-App uses webpack to bundle all its dependencies. It helps developers focus on the development and handles bundling all the assets, modules and dependencies into a single bundle. Now with webpack 5 out, I thought it would be a good idea to introduce everyone to this awesome utility.

Using webpack, you can create your own custom solutions/boilerplates, rather depending on what you find on the…


Image for post
Image for post

Load large lists the intelligent way

Recently I was given the task to manipulate a huge chunk of data. The minimum number of records at any given point was around half a million. Generally, the backend guys would help us out by adding pagination to the API, but this time I was on my own(plus I was not aloud to create my own backend).

To show what happens when we try to loop through a large data array:


Image for post
Image for post

dispatching async actions never looked so good

So this is the third instalment in my Redux-Toolkit series, you can find:

When it comes to managing state in a React application, Redux has become somewhat of an industry standard. Now with the introduction of Redux Toolkit, life has never been easier. Its functional, easy to setup and you get to create slices of your store for better code maintainability and modularity.

Redux at its core is synchronous, so we need to add middleware like Redux-Thunk or Saga to help us…


Image for post
Image for post

This is a continuation of my previous story.

Let’s take a slice of choco-chip cake, the slice will contain the cake, the frosting and the choco-chips. Now if we were to think of the whole cake as the redux store. The traditional design says keep the the reducer, constants, actions in separate files, or a cake slice where the cake, frosting and the choco-chips are served separately.

In Redux-Toolkit, the createSlice method helps us create a slice of that redux-store, which contains the reducer and actions in a single file. …


Image for post
Image for post

A simpler (functional) state management

So I just came to know about this because of a new project of mine, where the team wants to do actual research before diving into the project. They don’t want to follow the same old technology stack, they wanted to have some fun.

So when I was asked if I had worked on React/Toolkit, I said yes ,thinking they meant the Redux dev toolkit, but I was wrong.

Side-note this is part one of a three part series where I will take you from beginner to advance feature of the toolkit.

So what is Redux-toolkit?

Redux-toolkit is a new…


Image for post
Image for post

Axios Cancel and Fetch Abort

Asynchronous behaviour is the base for any XHR call in JS. Handling this behaviour to produce desired output, may seem easy. After all its just a simple Promise.then or await, but as conditions change, the solution has to be altered to accommodate them.

There might be occasions when the user invokes an event multiple times, with different inputs. As JS makes async request to the endpoint, one cannot think the responses will also be in the same order.


Image for post
Image for post

Challenge yourself, look where others won’t 🙆‍♂️

This is going to be a short one, it has been around five years since I started my career as a developer. I moved from backend to database and finally found my place in front-end. Now been working as a React-dev for the past 3 years I feel like I found my Ikigai.

I love to learn and explore, but now and then I would feel like I have plateaued and feel a void, because I had stopped growing. …


Image for post
Image for post

A custom react hook to fetch the height and width of element

When designing a web app which has has to follow RWD(responsive web design), there are some limitations which you will face no matter how well you know CSS. There will be areas where you would be like “Why can’t this be done by using CSS,” you would do a lot of research, but at the end you would realise, this is a dead end.

The Why?

This happened to me, the problem I faced was to create responsive graphs. As a developer the first thing that comes to…


Image for post
Image for post

Create your own custom Icon component to render your svgs.

This is something I always wanted to do, create my own Icon component which would be an unopionated reusable component. Meaning anyone could use the component, the same way we use jsx components, without thinking much. To be honest there is only one step that is opinionated.

Why create your own Icon component, when there so many awesome libraries that already does it for us like mui icons and font awesome?

The answer is simple theses libraries provide us with hundreds of icons, but we might only require a few…


Image for post
Image for post

Api calls have never looked so easy

I got a chance to refactor, my teams old code. As I was going through it I found, there was no modularity for the api calling section. They had used Axios but were not using its power to the best.

The main requirements I had to refactor were:

  • Creating instances for the multiple endpoints, we were using.
  • Setting token for the instances that required authorisation.
  • Implementing multiple validations to the Header, before the http call is made.

So what is AXIOS

Axios is basically an external library, which is used to make promise…

Abhimanyu Chauhan

A UI /UX Designer and JS Enthusiast, with a passion for travelling and writing.

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