Ronak Patel

Hi, I'm Ronak Patel. I have been living in Ahmedabad for the last 10 years. I completed my master's and bachelor's from Gujarat Technological University with distinction. I took my master's project from ISRO, where I worked on a live project named DVBS2. I was responsible for developing a specific code based on DVBS2. After completing my master's, I joined BBU Technology, where I worked on different technologies. I learned HTML, CSS, JavaScript, and we worked on projects based on Django, such as the Digital Society Management System and Food Processing System. We also learned MySQL. I was also responsible for taking business requirements, and I partially performed the role of a business analyst. From August 2022, I have been associated with EMP claims, a product-based RCM company. We are developing a product for them. The product is very big, and we are dividing it into different applications. As a RCM, task management, time management, workflow management, and automation are the basic and crucial things for them. We are developing task management, time management, workflow, and integrating automation with our application. We worked on a small application using React, Node, and MongoDB. My main role was developing API and integration between the frontend and backend and developing logic in the React side. I am also good at creating common components in React. We also have another project, which we outsourced to a company in Bangalore named Saleros. The project is email automation, and we are using Power Automate tool. Apart from that, we are using Python for connecting with OpenAI. For the application purpose, we are using React, Node, and from the database side, we are using MS SQL. I am also very good at MS SQL. I am playing the role of Scrum Master. I have done the certification of Scrum Master. I am responsible for planning a sprint, executing the sprint, dividing the task among the developers, demonstrating the developed thing in front of business users, and being part of the business discussion if needed. I also develop user stories if required. That was my role. Thank you.

So, for the undo and redo feature of React, Redux is something which we can use as a global state. What happens is, when we are using Redux storage, when we're doing undo and redo, if you click on the button, that particular component's values will be stored within that component. We can dispatch this to that particular thing, so it will be stored until we're updating that particular component for the time being. We can use this further if we want to redo that feature. When you click on the redo button, it will replace the current state with the previous state. Redux will store the global data, which helps to store and memorize data, so it will help us to improve our performance in React.

To enhance a React web application, we need to consider a few things. So we need to start from the structure of our application. So for that, first of all, we need to emphasize more common structures wherever it's required. So reusable structures will help us take less time for re-rendering. Then whenever it's required, we can use global hooks like Redux. If it's required, we can use context to pass particular states to child components. At that time, we can use context. Then we can use memoized components, which will use only inbuilt functions, so it will memorize components within. So we don't need to utilize more memory further. To avoid re-rendering functions, we can create a dependency and make a conditional re-rendering function. Apart from that, to see proper performance of the application, we can use inbuilt dev tools available on browsers, like dev tools. We can also use Lighthouse. So that will help us identify performance issues on each screen where exactly the component is lagging. So that will help us to identify the issues accordingly. We can then change our structure, and we can also develop a Webpack. Webpack will help us minimize our whole application and build it in the best way. Then we can create few testing mechanisms, like unit testing mechanisms. So that will help us minimize bugs in that. While running our application, we can use testing mechanisms like Jest and Mocha.

Okay, so for CSS box model, normally, we prefer to use the SCSS model, but to design a CSS model that ensures padding and margin, instead of giving a fixed PX, we can use percentages in the padding and margin. This will help us achieve consistency across all browsers. It will adjust automatically based on the width and size of the browser, which is the best way to define padding and margin through CSS in a CSS box model.

Normal any other DOM structure in a virtual DOM structure. If we see what virtual DOM structure is, it does to virtual DOM. Whenever a component is updated, it will only update the specified component, instead of updating the whole component. This will help us optimize our performance through virtual DOM. It will update only the specific component, which is how it helps to optimize performance. Unlike DOM in a DOM structure, when we update something, it will recreate the old DOM structure, which will eventually impact the performance of the screen.

Okay, so for the Redux component, we are globally managing the Redux component and will pass that component through a provider. So, the provider for that we need to dispatch that component when it is required. So, we can suppose if we are managing some state count and set count to when we want to update that particular component at that time we can use the dispatch function. So, within that dispatch function we can do the set count function and whatever you want to update and for that also you can use a callback function. So, it will create a dependency within it. So, if it is, if that particular dependency is fulfilled then and then that particular Redux component will render otherwise not. Also, we can use the memo function. So, the memo function will only use memorized function. So, that and we can use a pure component as well.

Okay, so within this function, we are first of all calling this function, say fetch data and update UI, we are defining the data with let, then first of all, it is fetching with the API, say API data, and then we are waiting for the response. Once response will come, that JSON data will be our storing into data. But now we are defining this console.function outside the fetch function. So we are not storing this data within that. So data within that, so we need to like, either we can use where instead of let function or this console.log we can define inside the third then, second then. So that will help us to see a data within this function. So we can see console.log data and direct writing JSON data in the second then function. So that will load data correctly. Or also we can define data as a where. So that will also will help us to identify actual data within console.log. But ultimately, when we are writing console.log data outside the then function, so what will happen is, it will directly that it will not wait for the fetch function, it will directly write this data. So first of all, anyhow, it will define undefined only. So we need to console this inside the then.

So, class-based React components are very traditional components, so there are many books available as functional components like useEffect, useRef, useMemo, useCallback, and useContext. I think using a functional component, we can optimize our application and class-based functions have very complex structures compared to function-based components, so it's obvious to use functions. We need to see which class components we're using, so we need to define all this.count with useState. We need to define a const count and setCount is equal to directly defining useState whatever we want to set initially, either it's zero or null. This will help us convert our class-based components to function components using hooks.

So to refactor large React components for complexity and readability purposes, we normally prefer to use common components first. So, like whenever we use input boxes and buttons, we prefer to create a common component, a reusable component that we can directly use even with CSS within that as well, so that will help us reduce complexity and improve readability. Then, one more thing, if we're using modals within it, we can create that as a common component too. Also, we can split our whole code instead of writing it in one place, we can split our code into small chunks, so that will also improve readability and we can use props only if it's needed, so we have to make minimum props within our component, so that it will become more readable. Also, we have to put particular comments, developer comments whenever it's required, so when we hand over to some other developer, it's readable for them, understandable for them for further requirements. So, we need to prepare documentation for that, we can create a README file as well to understand the logic behind it, and the documentation will help us for bug fixings or further feature enhancements, so that will help us with the functionality of the large component, reduce complexity, and improve readability.

So, for server-side rendering, it normally occurs when we're calling APIs. However, we have to reduce server-side rendering because we can't make many API calls. To solve this, we need to create a dependency, so we can use a callback or a memoize function as one solution. Based on the dependency, the function will re-render. For search engine optimization, there are two techniques we can use. One is to wait for one to three seconds before hitting the API. Alternatively, we can create conditions, such as hitting the API after one, two, or three characters are entered. This will also help optimize performance. We can also use a debounce function to optimize performance while searching. If we just hit the API with every character search, it will make API calls very tedious and may result in mismatched data.

So, set up and utilize TypeScript in a React project, so I think it is a much more required thing, TypeScript thing, so it will help us to see a syntax of the code, so whether this syntax is correct or not, so I think TypeScript required is much safer for the maintainer and maintainability of the code.