You might have used redux with react, as it is a widespread practice. Many people use redux-saga or redux-thunk for async actions as middlewares. Redux allows you to create your custom middleware as per your requirement. A middleware can be added in between dispatch and reducers so that we can alter the actions or can dispatch other actions (for async actions).

This is done with a function returning function. So, let’s first understand about function returning function.

It is simple and can be done as follows -

As of this writing, Concurrent mode is experimental. It allows the rendering process interruptible. It doesn’t block the browser from making changes to the DOM and continues rendering in memory.

The performance of an Application can be good or bad depending on the quality of code. In React, The Profiler API helps in measuring the performance of a component and enhancing it.

The Profiler API for DevTools first got shipped in the 16.5 React version. It helps developers find difficulties in your web application. In 16.9 version, the React team has gone a step further to enhance the API.

Without a doubt, react forms can be sometimes complicated. Thankfully, formik is designed to make your job easy. With formik, forms in react will be easy. Plus it will help improve the performance of your application.

There are two major client side library’s which we can use with react for GraphQL a) Apollo b) Relay In the post we will look at Apollo and how to use it. If we compare Apollo with Relay Apollo Very simple to learn and fast to implement Work’s cross platform, we can use this on React/Angular/Vue etc This is the major reasons for using apollo client, here is a very short comparison for the same.
Portals is a feature which was added in React 16. It lets you render children into DOM node outside of the parent component. How to create Portal? ReactDOM.createPortal(child,domNode) where child can be any renderable React element such as fragment, strings or elements and domNode is DOM element. What can we do with Portals? We can make Modals, Tooltips or even opening a different window sharing same state as the component from which it is opened is also achievable using Portals.
React has many different types of components and all provide different kind of use cases and performance optmizations. In this post we will see different types of components in brief and which component to use when Basic Component  These are the default component of react which we use always, this has the all the react features like state, props, etc class Welcome extends React.Component { render() { return <h1Hello, {this.
Authentication is one of the most basic features in any web app, in this post we will see some of the best practices on how to implement authentication in react apps. There are several ways of protecting your routes from an unauthenticated user in your React Application, for example, it can be done by using HOC pattern or by using React Context API. Lets see first how to protect routes using React Router.

React team has pushed some important updates recently which should be implemented across all projects. Lets look at those updates those updates in detail and how to use them.

Introduction In one of our projects, we need to integrate google calendar into the website. So the company for which we were making this web app involves managing payrolls and personal data for the employees of several companies. The problem which we faced is how to sync their all payroll dates data with google calendar? As there were lots of dates to be synced with google calendar. These are the codes which we wrote to do initial setup:-
 In this article we will try to understand the concept of redux-saga. I’m using Redux-saga in my react-redux apps since last two years and will share my experience with saga. Introduction Redux-saga is a middleware library which basically used used in redux flow of the application.To manage the complexity of redux application and to manage the potential errors. The basis purpose of the Redux-saga is to easily manage the application side effects and better handling of failures.
setState in React is a function. It is accessible within the component and updates the state which then triggers the render-ing of the component with the updated state data. However, React setState does not ensure re-rendering immediately as it is called, resulting in the rendering of data with previous state data. we can think of setState as a request for rendering the component which may get stuck or delay due to any of the reasons of react - redux lifecycle or a bugged code.