Pawan

Could you help me understand more about your background by giving a brief introduction of yourself? Yes. I'm a full stack developer by profession with 7 plus years of experience. Along with that, uh, I have mostly worked with JavaScript frameworks like React, Angular, Node. Js, Express. Having said that part, um, I have worked with various projects out of which, um, these are native web apps, mobile apps, and even back end apps that have been scaled up to 1,000,000. In addition to that, if I talk more about, uh, my recent project, so it was one of the, uh, recent OTT platform where we have, like, streamed the the retention cup as well, and we were able to confidently host more than 1,000,000 request. So that was one of the achievements for us, and more specifically, our system was easily able to bear this much amount of payload. So, yep, that was good, and that's a brief about me. Thank you.

What is your approach to error handling and logging in a full stack application using React, NetJson, TypeScript? So with respect to error handling, so because if you talk about React, NetJson, and TypeScript, these run on top of React itself. So React is a framework under hood. So we need to make sure that the application is not breaking. And for that, we do have error boundaries in place. So we can wrap the error boundaries for various subcomponents and modules. So let's suppose we do have a very big application. We can break down into sub smaller applications and modules, and we can host them within a particular error boundary. So what it will do once a particular module is breaking, it won't cause the complete app to break. So that's one of the case where we can handle error handling. In addition to that, if you talk about logging, there are various types of login. So one that is helpful for the developer, one that is helpful for the, uh, end user. So we cannot show everything and every information, uh, to the customer. So we can have a particular logging in place that can help to debug the things in a better way. We can provide info logs, debug logs, error logs, and, uh, success logs as well. Yes. And for that, we can, uh, use various tools, like Winston is there. Pino is there. So these are, like, certain tools that we can use, and, uh, we can integrate with our platform so as to show different kind of logging uh, loggings, uh, with respect to different environments. In addition to that, we can pass on this log to a specific stream that can be elastic cache or any of the service provider where we are maintaining these logs So that if needed, we can analyze because, uh, we cannot analyze on real time. Everyone is busy for the production. So you can analyze those logs that these are the errors. These are the types of errors that we get from the user. And based on that, uh, we can expand more on these things.

Can you outline a strategy for implementing feature flags and react in to control the deployment of new features? Yes. So in my opinion, if there's a new feature that is being developed, it should be under a feature flag itself. Uh, the reason being is that, uh, let's suppose you are deploying your work, uh, to the dev branch and you're tight on budget, so you cannot have multiple branching strategies and multiple environments to be hosted at the same moment. So that's where we need feature flags so that we can hide a specific feature behind a feature flag. But how to implement that feature flag? There are, like, various ways you can store the feature flags and the various kind of RBAC and feature driven flags in the DB itself. Along with that, there are, uh, existing platforms like LaunchDarkly that provides you these flags. And based on that, once you fetch these flags to your application, you can simply, uh, get these flags and enable or disable a certain feature as well. So this is one other thing. And having said that part, when it comes to deployment, because these are coming from a specific third party or, uh, organization or a DB, so you do not need to redeploy the application once again. And, uh, most recently in my project as well, we were using, uh, access. This is one of the content management tool, um, so for handling the feature flags. So we simply toggle the options, and that will enable or disable, uh, particular feature in an complete full fledged application. Thank you.

In terms of scalability, what are some of the best practices you follow when setting up state management in the Next. Js application? Um, state managers management is one of the simplest thing as well and one of the complex ones as well if you think it very carefully. So when it comes to state management, I try to keep everything very much loosely coupled. So let's suppose if I'm talking about a user state, say, if that's needed, I'll keep that within a specific context, uh, only if you're talking about very specific to Next. Js app. So I'll create up a specific context. I'll create that state there itself. In addition to that, if I feel like there is a state that is being shared in a user module as well, and let's suppose in messaging module as well. So I'll keep that state in Redux, uh, because that's one of the global provider where we can share these states. So only a shared state will be, uh, passed on to a global state. In addition to that, if you're talking about individual states, that should be sitting at the user level or the individual component level itself. The benefit of that is that once you're moving to the micro front end architecture or any kind of architecture where you are breaking down the module itself. So it will be very easy for you to, like, extract that component out of it because once again, that is loosely coupled. So this is one of the ways through which you can have a better state management. Thank you.

Can you detail an approach to converting a complex class component in React to use React Hooks instead? It's never a complex, uh, class component. So it can be of multiple lines as well, but we need to make sure that it is divided in a very efficient way. Having said that part, when we compare class components and, um, functional components where we can use React Hooks, so there are multiple life cycle methods for which we need to use Hooks and state management as well. So let's talk about that. So when we talk about class components, so we do have, um, let's suppose the first thing that comes into a picture, get drive straight from props. Then we do have a componented mount. Then we do have a should component update or not. Component, uh, will update. A component date update. Component will update is deprecated after React 17 version. So we do have component date update. Then at last, we do have component fill and mount and, uh, get right straight from errors. So this is with respect to error boundaries. So having said that, these life cycles are very specific, uh, to a particular class component. How we can achieve that in the function component? So for that, we do have use effect. So use effect is a combination of component where dead mount, component date update, and component fill amount. So this is a combination of these 3 life cycle hooks. When we talk about a state management, how we can, uh, do a state manage. So in clause component, we do have a state as a specific object where we can use this dot set state method itself, and that will update a part of the object or the complete object itself. We cannot have multiple states there. With respect to that, in functional components, we can have multiple states. So that's a benefit. You can break down your states into multiple states. So you can use use state hook, and you can break down your states. So that will make you, uh, make it easier for you to, like, maintain different modules of that complex component itself. We do if we are managing a complex state, we can use, uh, use reducer instead of use state. So it works in a very similar way, but it pass on a dispatcher, and it maintains, uh, the state, uh, using the metrics that you dispatch. In addition to that, if you want to maintain some references, you can use use ref. So it is very similar to create ref in class component. Uh, however, if you're talking about, um, let's suppose there are, like, some context provider, so you can use use context hook if you're talking and dealing with the context. So these are, like, certain things that comes into the picture. And if you're integrating any third party libraries right, Redux, so map state to props and map dispatch to props will be very similar to, um, use selector and use dispatch in React Hooks. So that is how it is in, uh, React Hooks. Thank you.

Describe your process of integrating a restful API in a next JS project, specifically ensuring endpoint security while handling sensitive data. Uh, There are multiple things, uh, when we deal with RESTful APIs and the security. Uh, so we can, first of all, rate limit, uh, the API so that it is not being exposed and, uh, not being or used. 2nd part is that we can only allow a specific origin set of origins to, uh, get access of that specific API. So when we talk about course policies so this is a cross origin resource policy where it says that only a set of origins are require are available or authorized to do that access. And when I'm talking about the authorization and authentication, so authentication is a process through which a user can log in and log out, uh, in a particular system. When you talk about authorization, so there are certain rules or authorization that user is authorized to do. So for that, we can do authorization. Having said that part, if you need to handle sensitive data, we need to, like, have validators in place so that there is no cross site scripting attack. And we even need to use CSRF token. So it will prevent the cross site, the forgery attacks as well. It will tell us that this is coming from a authorized user itself, uh, with respect to that token. So these are, like, certain ways through which we can enable the security. Apart from that, there are multiple things. We need to even take care of content security policies. Then we even if we are using iframes in place, uh, then we need to take care of the things that it cannot be injected easily. Uh, we need to take care of SQL injections, and we need to we do not need to use eval keyword. So these are, like, certain practices that we need to keep in mind. Uh, moreover, we can even talk about the HTTP pollution parameter so that the request is not being tampered. Your headers are not being tampered. So we need to, like, keep, uh, track of these things as well. Yep. Thank you.

As a direct snippet using hooks, can you find the bug related to the use state who can explain what is going wrong? So we do have this import statement, const my component. Okay. That's fine. Use effect, set time out, set count, count plus 1 after 1,000, and then we do have a return. First thing is that you have, like, returned I think so that does undefined at the moment. So written undefined from the components, it will not do anything. But what's the bug within the set count? Okay. So count plus 1. Because that is being happening very frequently in one second. So this count will not have the reference of the previous count. So for that, we need to use a callback here. So I think that that will resolve the issue. Thank you.

Unless the TypeScript snippet, can you explain what is incorrect about the use of any type and how to rectify it following best practices? First of all, any type is not a good thing to use in TypeScript, but let's go over the code itself. Function handle API response responses any, void, console dot log, response dot data. Okay. So because this response is of any type, so our first thing, our intelligence will not, uh, going to know that there is a data property or attribute within that response. Or how that data will be looking like, we are not sure about that. So instead of that, we should make it a little bit TypeScript. So we can simply say that, okay. This is a specific type for this response. We can use various interfaces, and even we can override these things. So once we have a data strict, uh, particular attribute there itself, so it will even do various operations over that response object and the data object that is within that. Thank you.

When faced with a memory leak in a long lived React application, how do you pinpoint and resolve the issue? So memory leaks can be, uh, due to various reasons. Either that is timers. You are allocating too much memories to the object. You are creating it, um, blindly. So for that, we do have a memory snapshot. So you can use any of the browser. There are dev tools within that. Go to the memory that has been consumed. So you will see there's a spike being offered after certain interval time, and it is not being stable. So that means that there is some kind of memory. Now the point is that how we can pinpoint that specific memory leak. You need to, like, create at least 2 memory snapshots within a certain amount of time where you can see a significant spike. When you're going to compare these spikes, you will see that from where, uh, this exact memory leak is coming. Is it timers, or is it the object allocation? And when you see that there these are the particular place where there is a significant difference. Let's talk about the objects because that is not common, but I wanna give example of that. So we'll see that, okay, these objects are being created, um, significantly. So you will see that, uh, while expanding that particular snapshot, snapshot, you will see that from which particular instance or which file we are initiating these objects. So you can go to that specific file. You can analyze the code, and you can resolve that from then and there onwards. There are various heat grounds as well. There are various profilers as well. Various tools that have come into this industry through which we can point these memory leaks. Thank you.

How do you implement a managed feature toggling in a complex project using TypeScript and React? Um, so feature toggling is very, uh, similar to feature flags as we discussed earlier, uh, in one of the questions. So feature toggling is coming from a certain feature flag. So you can render it based on certain conditions. You can have a higher higher order component that will say that, okay. If you are getting this specific flag, we will enable that route so that our user can access that application. Because while we are going to, like, do a production build, we need to make sure that these codes are being injected very, uh, seamlessly. So we can even request for the dynamic code. So we are very specifically talking about static site generations, air dynamic site generations, and client side rendering. So these are, like, certain difference where we can, uh, do the rendering based on these certain logics as well. That will enable us to toggle the feature flag. And because we are using typescript, so the data will be very much typescript typescript. Sorry. And we can utilize the beauty of typescript to handle the types very easily. So in our intelligence will give the, uh, options and things to do with the data, and that will easily enable us to toggle these features. Thank you.

What is your method for measuring and optimizing the end to end response time of API calls in the Next. Js application? Response time of API calls depends on various factors, latency, uh, latency of the server, where the service is situated from which specific part or database we are using, how much time is that query needing. There are multiple factors that are coming in place for, uh, these API calls. Let's suppose if we are, uh, dealing with these things, how we are going to measure that? So first thing is that we'll go to network dial. We'll see that, okay, this is the response time of this specific API call. If that is taking more than one second or maybe I will even say 800 milliseconds, that's not a good user experience. So with respect to that, you will see that where it is taking time. Is it the server latency? So you you can use the waterfall model model itself. So you will see that. Okay. So the latency if the latency is good, then, uh, you can go towards the server and deep down into the query itself. That why it is being taking that much amount of time. And that can depend on various factors like database and the type of limiters that you're using and all that stuff. But if the latency is not good, you need to check where the server is lying and from where this request is coming. And to avoid that part, you can use various serial servers as well. So that will allow you to serve your request from various, uh, countries as well. Now having said that part, maybe there is a high possibility that server is going up with tons of load. So to avoid that load, you can use load balancers. You can use cache. So what cache will do, it will not, uh, retrigger that specific query. It will, uh, fetch the results from its memory, and it will return to the user. It is already computed. So we can use these specific techniques to optimize, uh, the response time, API calls, and analyze, uh, the APIs irrespective of Next. Js or any of the application. Thank you.