React is a very popular and growing JavaScript library. When we think in the context of MVC architecture, React comprises the View in MVC architecture. For managing application state, we may need to rely on other JavaScript state management libraries like Redux or if you are using React v16+, so you can use React's Context API in combination with useReducer hook to serve our state management purpose. Good architecture makes the system easy to understand, easy to develop, easy to maintain, and easy to deploy. The ultimate goal is to minimize the lifetime cost of the system and to maximize

In the previous article of the React Design Patterns Basic to Advance series, we became familiar with the Basic Design Patterns which are widely used in React. In this article, we will learn about the various Advanced Design Patterns in React. React design patterns basic to advanceAs a Frontend developer and working on React for several months, one of thetopics I have paid close attention to is Design Patterns. In this article serieson React design patterns, I will share my learnings. This blog is completely about the design patterns which are widely used in Reactapp deve…Kiprosh BlogsShubham JajooAdvanced Design

As a Frontend developer and working on React for several months, one of the topics I have paid close attention to is Design Patterns. In this article series on React design patterns, I will share my learnings. This blog is completely about the design patterns which are widely used in React app development. So before diving deep directly into design patterns, we will look into a short introduction of React and JSX. React React is a JavaScript library for building user interfaces. It lets you compose complex UI from small and isolated pieces of code called Components. Component in React

React was released with an update to React's core (Reconciler) algorithm. This new algorithm is called Fiber. Before diving deep into what is Fiber and how it works, it is must to know the React's reconciler algorithm as Fiber is nothing but the re-implementation of this previous algorithm. You can refer to the reconciler algorithm on React Official doc here. React ReconciliationIt's an algorithm that React uses to diff one tree with another to find which parts need to be updated in the next update. E.g. whenever the component's props or state gets updated, whether to make an actual