Nitin kumar

If we talk about my experiences, so I have over 5 years of experience and 3 years in a relevant field. Okay. So I have worked with a couple of companies. The first company is Precious Info System and another company is 4 4 Technology. And to both of the companies, I was a lead there. I was managing any product from scratch to end where I was handling multiple teams with multiple projects into multiple technologies using back end, front end, mobile, all of this. My main core is JavaScript and TypeScript. I work with Redux libraries, React.js, React Native, both, and also with Node.js. I work with MySQL, PostgreSQL with Node.js. And apart from this, I do some work with other stuffs, like native models, integrating, and other things. If you talk about my projects, I have worked on solar domains, like e-commerce, education-based platforms, banking applications, Bitcoin, training, and other steps. I mean, from end to end, I have worked on many of the same like CMS and for the app, and for the app, MVP, MVVM. Okay. And for one time, I have managed multiple consoles, like user console, super user console, admin console, and customer console, as well as rider and restaurant and customer consoles. Apart from this, I have also built knowledge to build and work with start-ups, that how start-ups work. I work with start-ups and guide them technically, that how we can enhance their technical experience. Like, overall, I have hands-on experience on front end mainly and back end as well. And if you compare me, so I am a full stack developer with all of the skills from doing anything from scratch to end, from back end, front end, or anything. Okay. And if we talk about the other stuff, from API, restful API, and how to overcome API recurrence when the user count is high. If the user count is high, the load server is very high. So at that time, I work on that as well. So I make the API load server very low with this. So this is from my side.

If we talk about the user interface. So, if we are making any of the applications, we should first know to whom we are making the application. If we are targeting a certain customer, such as 18 to 25 year old college students or anyone, we should make all of the things accordingly. Okay? And if we talk about the technical experts, we have the live library. If we have any components library, we should make the components very easily and dynamically where we use multiple designing to achieve our goals. If we talk about other things like components, sometimes what happens is we rewrite lots of code for each element, like a button, input field, and card. So at that time, what we can do is make a button into a reusable component, and we can reuse it. This will give us benefits for rerendering and writing other parts again, and for importing cards and all of these things. Also, if you talk about building live libraries, CSS gives us many libraries which encapsulate components, including styles and all of these things. So at that time, we can use third-party libraries, like Material UI and JS 3D, and many other things. Okay. And if we are using a proper system design, we should go with particular design patterns to overall the application. It should not happen that for one view or one page, we are doing something and for another, we are doing something different. Also, if we are making any text as static, like full name, last name, and generally with text, it should be contained in a global variable. Like if we have declared all the text in a global variable, it gives us chances to do things if we want to change the language. So entirely language, we can change through this global variable. And all of the other things, like typographic colors and all of these stuff, should be in a global variable only. And if you talk about the team provider, the team provider works such a way that when we want to switch our theme from dark mode to white and white to dark, the entire application should be such a way that we can use this from the team provider. Using the team provider and while using the details for the phone contact check guide, there are many things from which we can do that. Okay? And one of the things was the atomic design which is introduced, or if we use that pattern, it will be beneficial for us to make the reusable components very easily. Okay. Apart from this, if we like to, one of the things...

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

How do you decide when to send this? Okay, if I talk about it personally, so, like, if we use the inline styles, inline styles are not perfectly useless because if we have five buttons, then each time we use the inline style. So, it will be not good and not beneficial for us. So, what will happen each time? What we can do is we can always use the inline and external style, right, for the other stuff. Or if you talk about the CSS module, so, like, for using the CSS modules, okay, for the CSS modules, it goes as some of the benefits, like simple, and if you talk about the dynamic style based on the state of, avoiding renaming convention conflicts for the large number of applications. Okay? And, like, if we talk about the pros, so, it is very convenient, quick, and styling adjustment. And apart from this, the dynamic style of updates. Okay? And, like, if we talk about the CSS model, so, like, CSS modules are used to put component scope, style of which, like, prevents naming conflicts, also. And, like, it improves the maintainability in the organization. If you talk about its growth, so, like, it ensures inside isolation for the components and also the better performance is compared to the inline style sheets. If we talk about phones, so, like, the it is less developer-friendly syntax, to be honest, and, like, for okay. And, like, for the, and now if we move forward to one of the things like style components, so for the style components, is it highly reusable across all components with the level syntax? And if you talk about, like, the theming and dynamic style, it's too good. And yeah. If we talk about this pro, so, like, it is a readable, maintainable, CSS with all of the JavaScript capabilities. It has enhanced JavaScript capabilities. Also, like, it, if we talk about other things, like, it supports the nesting, media, curie, and animations as well if you want to 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 to runtime style generation and, optimizing for the critical path that's rendering. So yeah.

How do you implement error boundaries in the affinity? Can you provide use cases where readers might interact with those? Okay. If you talk about error boundaries, so, error is something that occurs unhappily after API calls, when we hit the wrong API or experience external issues such as a non-working Internet or a slow system. So, as we compare it with Redux, some of the things are similar. Like, what we can do is create a component that consists of a boundary set for the component. We can state a state for the error and, at the time the error occurs, show a popup saying something went wrong. Next, we think about the end of the application. If you use a disc reader, it will be beneficial to wrap up the entire application with an error boundary. So, what we can do is make the component of the error boundary, and we can wrap our component inside the error boundary. We can make it in a way that if something went wrong, it occurs in any situation. Okay? If we talk about the use cases, so integrating readers with this. So, for this, we can define an action for the error login after this reducer initializes the state and gets the error boundary. Apart from this, if you go forward, we can connect the error boundary with Redux. After connecting the error boundary with Redux, if we face an error in the entire application, we can directly hold that function with dispatch or show that error in our application. So, this is how we can manage all of the errors by using readers. If you want to use the connected error boundary, we can wrap the error boundary, and then we can write our component. Also, in the whole step, the error is pulled by the error boundary, dispatches the error, and uses its actions with the Redux store, allowing us to handle error logging and other side effects through its setup. So, 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 it to debug complex systems? Yeah. If we want to talk about the deeper complex issues in React reduces it. So, what can we do? We have different methods. Okay. So, we can use the React base and we can use the React developer tool to do this. We can inspect components and performance monitoring by using that debug. And if we talk about React reduct specifically, so we have React reduct's tools. We have the time table debugging, action inspection, and state difference. Did you just provide this much of the things? Also, if we talk about logging options and middleware logging, we have the logger and we can log any of the storage states. So at the time, we get the state and move forward. And if you want to talk about other tools like breakpoints, so we can use breakpoints in our ID or browser to post-execution and inspect variables instead. If we want to call from one line to ten, so we can make a breakdown into the 15th of when the error will be low. So into the pipeline, it will break and we can do our things. We can also use the debugger statement in between our code. Generally, we write with console dot logs at the time we do that. Apart from this, when we write unit testing, generally we do unit testing through libraries like Jest and Enzyme. So, when we write unit tests, it will give us security. Yet, we are making any of the applications very efficiently using Jest, Enzyme, and other libraries. Okay. And if you want to use any of the boundaries. So okay. So, at the time, if we are using any of the boundaries, and if we have saved the boundaries, so boundaries are set in such a way that we can get the boundary and do our work. So, these are some of the things we should take care about while maintaining efficiency.

Examine this data suite within. Yeah. If we want to find the bug in between, for the purpose of this, if you want to find so, here we are importing useState, useEffect from React, and is a function. Timer component. And into the timer component, each and every time we have one state if it's zero, if you use the first for interval ID and set second to one. Okay. Return key there, return it. So, the problem here is, and the first one absolutely looks fine. If we are using the useEffect, yes. Yes. Yes. I got it. If you are using the dependency array, so here, the return is blank. So we should not use the return as a blank. Okay. If you talk about the setSecond step parameter, clearing the interval ID. Using the safe second, we can insert it. It's steady the most state value. And the setSecond, I think it's also works fine. It's also fine.

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

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

Yeah. If you talk about the virtual DOM. So, if we have the virtual DOM in place, what it helps to do is make the virtual DOM run in such a way that when if you have any changes, if the status changes. Okay. So, the state, the virtual DOM, what's the actual DOM? The virtual DOM, we know that it's a lightweight representation in memory. It represents the actual DOM in the browser, which renders the web application. It helps as an intermediary between your real component and the real DOM, playing a crucial role in optimization and performance. If I explain the working: first, when the state will change. When the state of a component in the application is changed due to data update or any other action, React doesn't directly modify the DOM. Instead, it creates a new virtual DOM that reflects the updated state. This virtual DOM update happens efficiently in the JavaScript memory. And when React utilizes different algorithms, it compares the previous DOM with the virtual DOM, and this algorithm sets the minimum set of changes required to bring the real DOM in sync with the virtual DOM. After this, React applies the necessary changes to the real DOM, minimizing the number of DOM manipulations, which are relatively expensive operations for the browser. If you talk about its benefits, it's like the performance is improved, memory is reduced, batching updates, declarative programming, and many others.

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