Ronak Patel

Hi, myself Ronak Patel. I am living in Ahmedabad since last 10 years. I have completed my master's and bachelor's from Gujarat Technological University with distinction. I have taken my master project from ISRO, where I have been worked on live project named DVBS2. So, I have been responsible to develop a specific code, which is based on the DVBS2. After completion of my master's, I have joined BBU Technology, where I have been worked on different technology. I have learned like HTML, CSS, JavaScript, and we have done few projects based on Django as well. So, the projects were like Digital Society Management System and Food Processing System. So, these two were the main project. So, with that we have learned MySQL as well. I have been also responsible for taking a business requirements as well. So, I have partially done a business analyst role as well. From August 2022, I have been associated with EMP claims. So, this is product-based RCM company. So, we are developing product for them. So, the product itself is a very big product, which we are dividing into different applications. So, as a RCM, task management, time management, workflow management, automations, these are the basic, very crucial thing for them. So, we are developing task management, time management, workflow, and integrating automation with our application. So, this small application we have worked on. So, for that we are using React, Node, and MongoDB. And MongoDB, my main role is to developing API and integration between frontend and backend and developing logic in the React side. And I'm also very good in creating common components in the React. Then, also we have one more project, which we are outsourced based on to one of the company in Bangalore named Saleros. So, that is email automation. For that, we are using Power Automate tool. And apart from that, we are using Python for connecting with OpenAI. Then, for the application purpose, we are using React, Node. And from the database side, we are using MS SQL. So, I am very good in MS SQL as well. Then, I'm also playing the role of Scrum Master. I've done certification of Scrum Master. And I've been responsible to plan a sprint, then execute the sprint, divide the task among the developers, then we demonstrate that particular thing, which we have developed in front of business users. I've been also part of the business discussion as well, if needed, and develop few user stories as well, if required. So, that was my role. Thank you.

So, for the undo and redo feature of the react, so Redux is something which we can use as a global. So, like what happened, so in a Redux storage when we are like when we are doing undo and redo, like if you are clicking on the button, that particular component values will be stored within that component, so we can dispatch this to that particular thing, so that will be stored until and unless we are updating that particular component for the time being. So, we can use like further if you want to redo that feature, so in that case you can once you click on the button redo, so at that time it will replace the, it will give you the previous message, so what will happen is Redux will store the global data, so global data will help you to, help you to store, memorize your data, so that will help us to improve our performance in react.

Okay, so to enhance react web application, we need to consider a few things, like very few things. So we need to start from the structure our the structure our application. So for that, first of all, we need to emphasize more and more common structure wherever it is required. So reusable structure will help us to take lesser time for re-rendering. Then whenever it is required, we can use global, global, global hooks, global hooks like Redux. If it is required that we can use use context when we want to pass particular state to that child component. So at that time, we can use use context, then many, many, many use of use MAMU, use MAMU will will use only inbuilt functions. So it will memorize component within. So we don't need to utilize more and more memory further. So in that way, and also to avoiding the re-rendering functions, we can create a dependency, we can make a conditional re-rendering function. Apart from that, if we want to see a proper, proper performance of the application for that, we can use inbuilt dev tools available on the browsers like available dev tool we can use, then we can use Lighthouse. So that will help us to identify performance of the each screen where exactly the component is lagging. So that will help us to identify the so accordingly we can change our structure, then we can also develop a webpacks. So webpack will help us to like minimize our whole application and and it will build our it will it will build in a best way. Then we can also create few testing mechanism for that unit testing mechanism. So that will that will help us to like minimum bugs in that. So and while during the running our application, we can we can like use testing mechanism like Jest and Mocha.

Okay, so for CSS box model, normally, we are preferring to use SCSS model, but to design a CSS model for to ensure ensure the padding and margin. So instead of like giving a PX, we can use percentage in the padding and margin. So that will like help us to consistence across all the browsers. So it will like adjust automatically based on the width and size of the browser. So that that is the best way to define a padding and margin through CSS in a CSS CSS box model.

Okay, so normal any other like other like DOM structure DOM structure in a virtual DOM structure if we see to what will virtual DOM structure is do to virtual DOM whenever component is updated it will only only update the specified component and instead of instead of like instead of updating the whole component so that will help us to optimize our performance through virtual DOM so it will like it will it will update only specific component so that is how it will help to optimize performance unlike like DOM DOM in a DOM structure when we update something it will recreate old DOM structure so which will which will eventually eventually impact the performance of the screen.

Okay, so for the Redux component, so Redux component, we are globally managing Redux component and will pass that component through through like through a provider. So 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 dispatch function. So within that dispatch function we can do set count function and whatever you want to update and for that also you can use use callback function. So it will create a dependency within it. So if it is if it if that particular dependency fulfilled then and then that particular Redux component will render otherwise not also we can use use memo function. So use memo function will only use memorized function. So that and we can use pure 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 that will also will help us to identify 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 a functional component like useEffect, useRef, useMemo, useCallback, and useContext. So, I think using a functional component, we can optimize our application and class-based function has very complex structure compared to function-based component, so it is obvious to use function, so we need to see which class component we are using, so we need to define all this.count with the useState, so we need to define, say, any const count and setCount is equal to directly we can define useState whatever you want to set initially either it is zero or null, so that will help us to convert our class-based component to function component using books.

So, to refactor large react component for the complexity and readability purpose normally we prefer to use common component first. So like we can like whenever we are using input boxes, buttons at that time we prefer to create a common component, so reusable component we can say, so we can directly from that even CSS within that also we can create common as well, so that will help us to reduce its complexity and readable purpose. Then one more thing we can like or we can if we are using modal within it, so we can create that as in modal, sorry as in common. Also we can split our whole code instead of writing in a one, we can split our code into small-small chunk, so that will also create a readability and we can use props even if it is needed only, so we have to make a minimum props within our component, so that it will become a readable. Also we can, we have to put particular comments, developer comments whenever it is required, so when we are handing over to some other developer it is readable for them, understoodable for them for the further requirement, so we need to prepare a documentation for that, we can create a readme file as well to understand the logic behind it and the documentation will help us to help us for the bug fixings or the further if there is a further feature enhancement, so that will help us to functionality of the large component and reduce the complexity and improve readability.

So, for the server-side rendering, server-side rendering normally happens when we are calling for the APIs. So, for the, we have to have reduced the server-side rendering because we can't call many API calls, so for that we need to create a dependency, so use callback or use memorize function is the one solution. So, based on the dependency, it will re-render the function, but, and for the search engine optimization, normally there are three, two techniques we can use. One is when we are searching something, you have to wait for like one to three seconds, so after three seconds, you can like hit the API or you have to like create, you can create a few conditions like after one, two, three characters, you can hit the API, so that will also help you to optimize the performance, also you can use debounce function, so debounce function also will help you to optimize your performance while searching, otherwise, if you just hit API while every character search, that will make an API call very tedious and maybe you will get 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.