Why Styled Component??? The simple concept on which the whole modern web applications are built is that in order for us to make the webpages desirable we have to style them and for styling purpose we use CSS. Let’s assume we are building a large scale application and we the developers have so much on our plate that we really don’t keep track of all the classes that are being used in the pages and thus we end up getting the Class Name Collisions and that my friend is a pain in the ***.
As we have established React is all about breaking down the UI into small components. Let’s suppose we have a parent component that renders multiple child components and the pros we provide to the child components are different from each other. But have you ever noticed that whenever you change the parent component state, it triggers the render method of all the child components, regardless of whether we are using the values in those components?

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.

What is a Portal anyway? Well, as quoted in the google dictionary, its “a doorway, gate, or other entrance.”

React v16.0 brought a similar concept of Portal that provides a way to transport a piece of UI into some other locations on to the DOM Tree while preserving its position in the React hierarchy, allowing it to maintain the properties and behaviors it has inherited from the React tree. Isn’t that amazing, you put your component in one place, and after the rendering, it’s somewhere else in the DOM tree.

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.

Hooks are upcoming features in React and are currently available in version 16.7.0-alpha.2. The hook can be used by installing the above version. npm i react@next react-dom@next So, what are Hooks? Hooks let you use React features without writing classes, they are functions that let you ‘hook into’ React state and life cycles from the functional component. Note : Hooks don’t work inside classes. Below we will see a simple example of the counter using both class and functional components with Hooks to grasp the concept of Hooks.
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.

 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.