Hello World !!! 🌏
In following article I’ve talked about few things that may seems small at one glance but they will impact on your code at broad scale.

Here are the few tips by which we can ensure, that we are writing clean and error free code.

1. null check 💁🏻‍♂️

I learned this hard way. We have to always do a null check before accessing a variable or key in object. Sometimes we thought that this will never be null why should I bother to add an extra if of try block. But trust me web is full…

In mobile friendly app development performance of App really matters. Any one extra render can affect the performance of our application.

Before getting into the solution first lets understand how react renders the changes and what causes the wasted render.

React re-renders the UI whenever state associated with any component changes. And if this state is passed as a prop to components, then each component receiving this state as a prop will rendered. This is the how react should work right? So where is the issue? The issue is in JS referential equallity. In Javascript objects are of non-primitive types…

In JavaScript lot of actions are event-driven. In our daily practice we use such event and actions a lot. onClick onChange are the examples of some events and we perform some actions whenever these event occurs.

Using Pub/Sub we can leverage 😃 this event driven approach and introduce it it our logical side of application. To isolate business logic from our application layer.

Before getting into the code lets understand Pub/Sub by an analogy of Newsletter subscription. Suppose 🤔 we have a newsletter subscription. Whenever new article is published, the newly baked ♨️ article is delivered to our mailbox 📧…

In react-application we encounter many scenarios where we want to switch to another route based on API response. For example when user submits a form, based on success failure we want our application to redirect him to certain specific page. Generally we accomplish this by creating aflag variable. Which keeps track of our decision whether to redirect or not. We make one state variable and update it, whether we want a redirection or not. Here is the code sample for the same.

Class Version

Generally for two purpose we prefer to use different environment in our application:

1. For security reasons: As JS being client side we can’t risk 🔴 putting our sensitive information in a constant file when we host our code in git or any other version control websites.

2. For Testing before deploying to production: As we never want to get bugs 🐛 in our production just after we push a new build. We prefer to test it on different environment with different setting and data which reduces the changes of getting new bugs 👌.

When we create our reactjs application…

In order to add asynchronous behaviour to redux we use a middleware called redux-thunk.
Just like regular action creator in redux return an action object, redux-thunk action creator return a function. And what special about this function?

It has an argument which we use to dispatch actions based on our async work.

So lets see how we can add redux thunk in our react-app.

Step 1: Create a react app. (npx create-react-app reduxthunk)

Step 2: Install required packages: npm install redux react-redux redux-thunk

Step 3: Create a folder name it redux we will put all our files related to redux…