Software And Architecture

Introduction This post will give a simple application that can leverage the useTransition and startTransition feature in react.js version 18 and higher. Transitions The transitions are the one that are executed to indicate a change in state from one to the other. For example, in a user listing component, we might have a transition to happen whenever the user tries to filter / sort the data from the grid. React.js has enabled these to be tracked because it involves mostly a user activity to transition from one state to the another state. Why does react.js want to capture or perform these transitions? The main reason for this is to optimize the rendering of the DOM which is a complex and time consuming process. Example Let us consider a scenario where the developer builds a react.js application (like the one in my sample code) which filters a grid of user's from the input captured through a text box. Note: This sample is not following the best practice because in real-time apps, we w

The Need  In case of using props in a hierarchy of components, we need to move the data throughout the hierarchy from the leaf node to the root node in order to communicate the data / handlers to the siblings This leaves us with the following 1. The parent components, does not need to know the child component's data but it still gets them inorder to uplift the state 2. Components gets polluted with the props of unused data / handlers 3. Chances are high that after development, in the maintenance phase, these methods might be overwritten or consumed in the wrong component if the maintainer does not have a good understanding and is on a hurry to resolve an issue 4. Data communication is highly linked between unrelated components Illustration The below diagram will illustrate the problem where each components uplifts the state in order to the siblings to get the update or data from their siblings. This causes the root component (<App />) to be fully aware of what is going on in

useState vs useReducer Introduction This post does not deal with what a state and a reducer means as it is expected that the user has a little background on what they are and how they work. This post mainly focusses on the doubts that a developer might encounter when they have to choose between a state and a reducer and not clear on when to use which feature. useState =>  This is a good state management tool (mainly used for component state) Suitable to manage individual states where the properties or data are simple like primitive values This is a good option for simple and less dependent data Example:   When we have a input change like radio button that turns on / off the visibility of sections of the DOM, a state is a good fit useReducer =>  This is a good option when objects are used as a state This is a good option to use when there is a complex state update logic to be executed since there is dependency between the individual states This feature helps in moving out the stat

Portals What are portals and why do we need another fancy terminology for a web app? The need In software development, be it in the server side development or client side development, the best practice that we follow is to identify and isolate the cross-cutting concerns and then use them in a separate library or package or module. This helps us test the implementation and also plug-in any newer version if the old version does need an upgrade and also to make them accessible at a global level. HTML & Cross-Cutting Concerns In the case of HTML, we have all been working in the rendering of the various elements in the DOM not worrying about the location of certain DOM elements and with the advent of many frameworks, we have got control on the logic and the rendering is taken care of by the framework (React, Angular etc..) However, in case of HTML we have several components like dialogs, modals, alerts, info etc which we kind of duplicate across various HTML fragments (through component

The need for a upgrade? Any library comes with upgrades to the functionality like security patches, functional improvement, performance tuned and new functionality added to accommodate the latest changes in the underlying language (in this case, it is Javascript) Also, these days there are lot of CVE (vulnerabilities) reported in many libraries so it is always good to upgrade and be on the latest version so as not to compromise the application. Also new functionalities / features brings in good chance for the dev team to learn and also write less and build more, so its a happy path always :) Steps to Upgrade 1. Install the npm-check-updates package through the below command  npm install -g npm-check-updates 2. Ensure that the package.json file is having a back-up or in source control like git, to be safe to make sure that we can revert back to the older one in case of troubleshooting any issues / incompatibilities in the new versions.  3. run the below command that scans the `package.j