Nitin kumar

Like, uh, if we talk, uh, about my experiences, so so, like, I, uh, I have over, like, 5 years of experience and, like, 3 years in, uh, relevant field. Okay. Uh, so so so, like, uh, I have worked with, like, a couple of companies. Like, first company is precious info system and, like, another company is 4 4 Technology. And to, like, both of the companies, I was, uh, lead there. I was, uh, managing, uh, any of the product from scratch to end where I am, uh, handling the multiple teams with the multiple projects into the multiple technology using, like, back end, front end, mobile, all of this. My main core is, like, JavaScript and TypeScript. I work with the Redux, their libraries, React. Js, React Native, both and also with the node. I work with the MySQL, PostgreSQL with the node. And, also, apart from, uh, with this, I do some of the, uh, work with the other stuffs, like, native models, integrating, and other things. If you talk about my projects, like, I have done, uh, I have worked on to the solar domains, like ecommerce, education based platform, banking applications, Bitcoin, training, and, like, other steps. I mean, uh, from end to end, I have worked on to the many of the same like, CMS and, like, for the, uh, app, uh, and for the app, MVP, MVVM. Okay. And, uh, for the 1 time, I have managed multiple consoles, like user console, super user console, admin console, and customer, uh, or and, like, for for for if you are making for the restaurant, so there will be, like, rider and restaurant and customer console as well. Apart from this, like, I have also build, uh, knowledge to build and, uh, working with the start up that how the start up work. I work with the start up and and, like, guide them technically that how we can enhance their technical, uh, uh, ex experience. Like, overall, I have, like, hands on experience onto the front end mainly and back end as well. And, like, if you overcompare me, so I am a full stack developer with all of the, uh, uh, skills from, uh, doing anything from the scratch to end from while it's could be, like, back end, front end, or anything. Okay. And, like, uh, if we if we talk about the other stuff for from the API, restful API, and, uh, like, how to overcome the API recurrence when the user counts. If if, like, some of the times, like, when the user counts, so, like, uh, the they are the peak of that load server is very high. So at the time, I work on to date as well. So I make the, uh, API, uh, load server is so very low with this. Yeah. So this is from my side.

Yeah. Uh, if we talk about, like, the user interface. So, like, uh, if we talk about the interface. So, like, if we are making any of the applications, so we should first know that to whom we are making the application. If we are targeting to a certain customer, like, 8 18 to 15, uh, years of, uh, college students or anyone, so we should make all of the, uh, things according to date. Okay? And, like, if we talk about the technical experts, so into the technical, uh, space, we have the live, uh, library. Like, if we have, like, any of the components library, so we should make the components very, uh, easily and dynamically where, uh, we use, uh, multiple designings to achieve our goals. If we talk about, like, other things like the components, sometimes what happen, like, we rewrite lots of code for the each element, like button, input, field, and card. So at that time, what we can do, we can make a button into the use the usable component, and we can reuse. So it will, uh, gives us benefit for the, like, rerendering and write other port again and, uh, again, for the, like, import cards and all of the things. Also, like, if you talk about the other in building live libraries, like CSS gives us where, uh, many of the libraries, which encapsulate, like, many of the components inserting, like, styles and all of these things. So at that time, uh, to do that, uh, we can do, like, third party libraries, like material UI and, uh, JS 3 d and many of the things. Okay. And, like, uh, yeah, uh, some of the, like, the design system and design patents are, like, uh, if we are, uh, using the, like, the proper system design, so so, like, we should go with the, uh, we should go with the particular design patterns, uh, to, uh, overall the application. It should not happen that for the 1 view, uh, for the 1 page, we are doing something and for the another, uh, we are doing. Also, like, if we are making any text as a static, okay, like full name, last name, generally, with test, so it should contain onto a global variable. Okay. Like, if we have declared any of the, like, all the text will into the global variable. So it gives us chances to do the things if you want to change the language. So, like, entirely language, we can change through this global variables. Okay. And, uh, and, like, all of the other things, like, typographic colors and all of these stuff should be into the global variable only. Okay. And, like, if you talk about, like, the team provider so, like, the team provider working, uh, such a way, like, when we want to switch our theme from, like, dark mode to white and white to dark. So, like, at the time, the entire application, uh, should have been such a way we can use this from the team provider. Uh, using the team provider and, like, uh, while using the, like, the details for the phone contact check guide, there are many of the things from which we can do that. Okay? And, like, um, yeah. 1 of the thing was, like, the atomic design which introduced, um, like, or, like, if we use that pattern to pattern of this, so, like, it will be beneficial for us to make the reusable comp, uh, components very easily. Okay. Uh, apart from this, like, uh, if we like to, uh, 1 of the things

Uh, how do you optimize the performance of the gate key? Yeah. Uh, if you want to optimize any of the data steps, so, like, first of the thing is proper for for this. Like, if we are using more and more reusable components, so it is beneficial for us to do the things. Like, if we are, uh, if we are navigating, like, if we have lots of data, so, like, we should not render that lots of data in a 1. So, like, instead of this, what we can do, we can use the and, like, infinite scrolling. Like, we have 10 data. Then we will install the 10 data, so another 10 data will come. So, like, this is 1 thing we should do. Uh, there are lots of stuff to do that. Okay. So, like, what we can do when we will, uh, scroll it down. So, again, another loader will work. We will test the data and, again, show the When we will see the 20 data, so, again, data will load in. If we can use it for, like this is how it work. Also, like, if you want to memorize any of these lectures, so, like, at the time, we can use the selector to re function it, the data and to overcome the rerender. So, uh, we can use the, uh, memorize selector for this. Apart from this, 1 1 of the thing is, like, what's right, uh, virtualization. Okay. So, like, we can use the, uh, uh, some of the libraries, like create virtualization or react window to our dash to optimize our application. Okay. Uh, like, it to like, it renders the visible item in a very large list. It optimized very large list in a very fair way. Okay. And apart from this is the, like, uh, debouncing we can use. Like, what happen, like, if we are writing any of the, uh, things, like, if we have written 5 characters in a second. So after writing the 5 characters, the API will hit and we can get the data. If we'll we'll not use the thing. So, like, if we write 1 character and API will be hit. If we like second character and API will be hit, so this is why we can use the debouncing. Apart from this, 1 of the thing is, like, lazy loading. If you will, uh, do the, like, any of the things of okay. Uh, for the re, uh, uh, debouncing. Okay. Uh, lazy loading that if we have, uh, are any of the API, image, if you want to load, uh, um, load it once it is not displayed. So, like, at the time, we can use the busy, uh, lazy loading and, uh, we can do a task.

How do you decide when you do you send this? Okay. Uh, like, uh, if I talk about personally so, like, uh, if we will use the, like, the inline styles, inline style is not perfectly useless because if we have 5 button, then each and every time we I will use the inline style. So, like, it will be not good 1 beneficial for us. So, like, what will happen each and every time, what we can do, we can always use the inline and, like, uh, external style, uh, right, for the other stuff. Or if you talk about, like, the CSS module, so, like, for for using the CSS modules, uh, okay, for for for, like, the c, uh, CSS modules, it, uh, it goes as some of the benefit, like simple and if you, uh, talk about the, like, dynamic style based propane state of, uh, avoiding, like, re naming convention conflict for, like, the large number of applications. Okay? And, like, if we, uh, talk about the pros, so, like, it is very convenient, quick, and styling adjustment. And apart from this, like, the dynamic style of updates. Okay? And, like, if we talk, uh, um, yeah, but it's the phone, uh, has some of the things, like poor maintainability and reus reserve rating, and it has large negative impact on the performance. Okay. And if you talk about, like, the CSS model so, like, CSS models are used to put, like, component scope, yeah, style of which, like, uh, prevent naming con conflicts, uh, also. And, like, it to improve the, uh, maintainability in the organization. If you talk about its growth, so, like, it ensure inside isolation, uh, for the components and also the better performance is as compared to the inline style seats. If we talk about phones so, like, the, uh, it is less developer friendly syntax, uh, to be honest for and, like, for okay. And, like, for for the, like, the and now if we move forward to 1 of the things like style component, So for the style component, is it highly highly reusable across all all of the components with the level syntax? And if you talk about, like, the theming and dynamic style, it's too good. And yeah. If we, uh, talk about this pro pro so, like, it is a readable, maintainable, uh, CSS with all of the JavaScript capabilities. It it has enhanced JavaScript capabilities. Also, like, it, uh, it has if we talk about, like, other things, like, it supports, like, the nesting, media, curie, and animations as well if you want to, uh, make our website interactive. And if we talk about its cons of the style components, so it is like the increase in bundle size due due to run time style generation and, uh, optimizing for the, like, uh, critical path that's rendering. So yeah. Just

Uh, how do you implement error boundaries in the affinity? Can you provide use case where readers might interact with those? Okay. If you talk about, like, the error boundaries, uh, so, like, error is something which occurs, uh, an unhapp unhappily after, like, API, uh, when we, uh, hit the wrong API or, like, anything of any external things will occur, like, uh, Internet is not working or, like, there is an if you are using the slow system or some of the things. So, like, as as we compare it with the, like, redox, so, like, the the some of the things. Like, what we can do, like, we can create a component. That, uh, component is consist of a, like, a boundary set by the, uh, of of for for the component. In a bit, what we can do, we can state a state, uh, for the error. And, like, if we had any time when the error will be occurred so, like, at the time, the the the, like, error will be occurring. We will show a pop up like something went wrong. Next, we think to the end of the application. Like, if you use the disc, uh, a reader, so it will into the entirely application, it will be beneficial for us to to, like, wrap up. And, like, if you want to, like, uh, wrap up or comp, uh, component with the, like, error boundary. So, like, what we can do, we can make the component of the error boundary, and we can wrap up the our component inside the error boundary. And we can make it in a such a way that, like, if we have, uh, my if something went wrong, so it occurs in at the any of the situation. Okay? If, uh, like, if we talk about the, like, the use cases, so so, like, integrating the, uh, readers with the, uh, to to to do this. So, like, for for this, what we can do, we can define the action for the error login after this, uh, reducer to initialize the state and do and, like, state getting the, uh, error boundary. Apart from this, like, uh, if you go forward, so, like, what we can do, connect the error boundary with the Redux. Okay? After connecting the error boundary with the Redux, what will happen if we have faced an error onto the any of the, like, entire application. So we can directly hold that, uh, function with the dispatch and or or, uh, we can show that error into our application. So, like, this is how we can manage or all of the error by using the readers. If you want to use the the, like, the connected error boundary, So what we can do when we write in inside the app, like, if you want to when we use the, like, provider or any of the things inside the provider, we can wrap the error boundary, and then we can, like, uh, write or component. Also, so, like, in the whole step, the error is pulled by the error boundary. It dispatches the error, and it actions using the detox store, allowing us to handle the error logging and other side difference through the its detox setup. So, like, this is the whole flow after setting the data, setting the error boundary, and we can do our work.

What is that? Do you use to debug complex system? Um, Yeah. Like yeah. If we want to, uh, talk about the deeper complex issues efficient in react reducts it. So, like, what we can do? We have the, like, different different methods. Okay. So, uh, okay. So yeah. Yeah. Uh, so, like, what we can do, like, use the React base, uh, and we we can use the React developer tool, uh, to to to do this. Like, inspect com component and performance monitoring by, uh, using that debug. And if we talk about particularly about the redact, so, like, we have the redact's their, uh, their tool. Like, the, uh, time table debugging, action inspection, and, like, state difference. Okay. So, uh, the did you did you just provide this much of the things? Also, we if we talk about, like, the logging options and it's just so we have the middleware logging. Okay. So, like, if we have any of the logger and and, like, if we want to log any of the storage states, So at the time, we get the state and move forward. Okay. And if you are to want to talk about any of the other tools like the breakpoint, so we can use the break point in your ID or browser to post execution and inspect variable in each instead, like, uh, if we want to call from 1 line to the 10, so we can make a break down into the 15th of when the error will be low. So into the pipeline, it will break and we can do our things. Also, like, the if you want to use the debugger statement in between of our code, like, send it. Generally, we write with the console dot logs at the time we do do that. Apart from this, when we write the, like, you unit testing, generally, we does the unit testing, uh, through the libraries like zest and enzymes. So, uh, when we write the unit test, it says, so, like, it will give us security. Yet, we are making any of the applications very, uh, efficiently, uh, using the, uh, Office, uh, app. Okay. And, like, if you want to use any of the boundary. So okay. So, like, at the time, if we are using any of the boundaries, so, uh, and if we have saved the boundaries, so, like, boundaries to is set in such a way that, uh, we can get the boundary and do our work. So yeah. So, like, these are some of the uh, things we should take care about, uh, while, uh, uh, more like efficiency maintenance.

Examine this data suite within. Yeah. If we want to find the bug in between. Like, yeah, for the purpose of this, if you want to find so, uh, here we are importing the use state, useEffect from the react and is a function. Okay. Timer component. And into the timer component, each and every time we have 1 state on 0 if you use the first for interval ID and set second set second to 1. Okay? Return key there in cable and return it. So, like, Yeah. So the problem here is And the first 1 absolutely look fine. If we are using the useEffect, Yes. Yes. Yes. I got it. Like, uh, if you are using the, like, the dependency array, So here, the return is blank. So we should do not use the return as a blank. Okay. If you talk about, like, the set second step parameter, Uh, clearing terrible ID. Using the safe second, we can insert it. The it's steady the most state value. And the set second, I think it's, uh, also works fine. It's also fine.

Given that you're confirming this repair? Like, if, uh, every time when the increment counter will be pulled to each and every time, the third counter value will be there. Okay? And it will return. So, like, to overcome the rerendering, we can use the use memo hook, uh, to, uh, memorize the value, and, like, we can use the callback to to, like, for, uh, to, like, callback it's thing. Okay? So, like, when we, uh, uh, in in this example, if we talk about, like, the, uh, uh, I'm a handle with the, like, the status test, we can break down its scenario by using the like, its counter. If we are using the setting of the counter, uh, so we can set it properly.

Uh, how, uh, if you want to, uh, if you want to type of web work it, if you have any of the, like, heavy heavy detox application, So, like, with the basics, if we are stuck, like, using the reusable component, using Redux, and any of the things, if we have done that, So, uh, it will be, like, uh, very beneficial for us for the things. And if you want to talk about, like, the web work, yes. So, like, it gives us some of the, uh, work, uh, some of the features to do the value of the heavy calculations. Okay. So, uh, so, like, what it does what it does, uh, like, if we have the, like, the escape to creation or the, like, the escape to creation, uh, by using this, we can do the heavy calculation. Uh, for example, like, if we have the, like, the calculation worker, if you make any of the, uh, class worker calculation in house and write the logic for it, Uh, so so, like, take skip it work independently into the main UI or the main thread to do our task. So, like, we can use a 1 thread to do the task. And inside the inside the, uh, worker, it's script, if you define any of the functions that perform, like, uh, any of the complex application logic for that work with this. Also, like, if we, uh, if we talk of, uh, if you want to, like, write any of the function that, uh, do a task, so, like, we can perform any function. We can write write the calculation. And for, uh, any of the function, what we can do, we can, uh, add a event slash net into it and calculation perform in this and do our task. Okay? And, like, if we have worker installation into the React, so, uh, if we have the React component and if we are importing it, so, like, what we can do, we can import the worker from the calculation. Okay. Uh, and, directly, we can do our task by using this. And if you want to transfer the data and and and, like, result into handling of it. So, like, what we can do, like, we can perform the calculation, update the dataset, and do our work by, uh, using this. Okay. And if you want to, like, render the UI and its indicator, so, like, what we can do, Uh, while play okay. So, like, while placing, uh, while the workers perform calculation, we can display loading integral, press for holder in AAA revised to inform the user data processing is ongoing. Okay. Uh, so, like, these are some of the interns. Like, if you talk about, like, the benefits of our system, like, improve UI responsive, better performance, module, uh, modular, of course. And, like, a a additionally, if you want to consider so, like, uh, it has limited data transfer. Large structure might

Yeah. If you, uh, talk about, like, the virtual DOM. So if we have the virtual DOM in place, so, like, what what, uh, what it helps to, like, the virtual DOM, uh, run-in such a way, uh, like, when if you have any of the, uh, uh, changes if if the status changes. Okay. So, like, the state, the virtual DOM, uh, what's the actual DOM? Uh, like, uh, the virtual DOM, we know that it is the lightweight into the memory. So, like, it represent the actual DOM dead browser, uh, you you was that renders into the web application. It helps as intermediate between between your real component and the, like, the real pro make, uh, crucial role into the optimization and the performance. If, uh, now I will explain the working. 1st, when the state will change. When the state of a component in the application is changed due to the, like, data update or, uh, calling any other so React doesn't directly modify the DOM. What it does, it, uh, instead instead, like, create creates a new virtual DOM, reflects the updated state. This virtual DOM updates happen efficiently include the JavaScript memory. Okay. And when the react utilize the different algorithm, compare the previous drone with the, uh, virtual drone, this algorithm the mining set of changes required to bring into real DOM in a sync with the virtual DOM. Okay. After this, re react then apply the namely, necessarily changes into the real DOM. The minimum number of the DOM manipulation, uh, relatively, uh, extension operation for the browser. If you talk about, like, it's, uh, benefits, so it's like the performance of, like, the reduced memory, batching updates, declarative programming, and, uh, many of this.

Yeah. For, uh, as we have, uh, discussed earlier that we should always make a global file, and we should always keep all of the all of the text word we are using as a global. If we will use, uh, all of this thing as a global, so it helps a lot. Like, by doing this, what we can do, we can, uh, implement some of the libraries, like, uh, I 1 at next. Another thing is React in it 1 or, like, for for format or process. So, like, these all of the, uh, libraries managed for the, like, the translation. Get could be, like, the loading, storing, and is it is it using? If you want to, like, like, format or any of the, like, date currency or any of the things according to date. So, uh, it depends on to the library on we we can do. Also, apart from this, like, if you are, uh, switching language based on to the user preference, browser setting, or, like, location. So at the time, it helps, and, uh, we can change accordingly. If you want to like the store, uh, like, uh, if you have, like, any of the JSON file okay. So, uh, so, like, uh, example of any of the JSON file is, uh, is is that if we have any of the, like, the it's the, uh, uh, product name or any of the things, so we can directly change into this, uh, uh, into the another language. Okay. Uh, if we have the data coming from the API, so here also we should get, uh, the, uh, logic according to date by switching the language. Because for the localization, we can change the our data. But if the data is coming from the API, so, like, that should be in such a way that or what, uh, we, um, we have chosen into our application. On okay. If you want to switch the, uh, like, language, uh, selector, so there should be such a edit when we will switch from 1 language to another. So it should switch from, uh, all of the localizations. Okay. And, like, after doing slowly, ensure it, uh, it should be tested properly by the developer to, um, meet and accept the task.