Chandan Kumar

Could you help me understand more about a background by giving a brief yeah. So, basically, my, uh, name is Chandan Kumar, and, uh, I'm my higher education, uh, is, uh, b in computer science, uh, and I started my career as, uh, React, uh, as a trainee in React in SmartVoice Technologies. Then I moved to Net Solutions where I gained knowledge for React. Js and, uh, started working in the pro, uh, live projects as well. So and, uh, the current company I'm working for is Quest Global. And here, my roles, uh, roles and responsibilities are to, uh, develop, uh, React components and, uh, all the websites, uh, website designs with API integrations. I manage all the front end part from my end, uh, of, uh, the, uh, current websites like, uh, Geo GeoCloud Games and Geo Creasy, uh, related platforms I'm working for. So my primary skills are React JS, Redux, uh, TypeScript, JavaScript, uh, HTML, CSS. Uh, these are my key skills from mine.

What practices would be of that nature? Uh, so, basically, uh, the practices which I use, uh, like, uh, in the recent project also, I use Redux for, uh, store management, uh, the state management of the entire application. Then, uh, I define custom hooks, uh, whichever is required in, uh, in my, uh, the functionality which we require in multiple components. And, uh, uh, also, um, basically, I I also makes, uh, API files, um, where we can make a request for get put, post, update, or delete, and all APIs I keep in the those file and export them, uh, so that it can be reused. And also for, uh, uh, basically, uh, stylings, uh, I do define the style component, uh, within the component itself. And, uh, for, uh, every components, uh, I make sure that if, uh, I also use pure components, lady loading, and, uh, um, uh, I do make a component folders like, um, the common mob the common modules which we reuse in different com, uh, different pages and all. Uh, for role purpose, uh, like, if we have application with multi with multiple roles, I do define the rules, uh, in constraints and all. So these are some basic, uh, things which we can, uh, uh, look into it and go with the project. Uh, basically also, I make constants. I make configuration files, and I do define the API, uh, URLs at a at a single page. I have made custom hooks. I make custom hooks for hooks for making multiple components. So these are the practices which we can use. Also, uh, we can use accessibility so that we can uh, reach to the large number of audience, um, basically making the using the semantic elements and all and, uh, also making the website responsive.

How do you handle API tickets in here? So, basically, I do store, uh, the, uh, the after login, I do store the, um, token in the in, uh, I do store the token in the storage itself, local storage. Uh, and there, uh, also, if we, uh, I do use interceptors where if, uh, the token expires or, um, it is not valid, I navigate them to the login screen itself. And, uh, for routing purposes, I do make, uh, private and public components through private and public components, basically. So in the private one, I do check that, uh, if the token is there, uh, then, uh, I'll render all the the, uh, the authentication pages. Otherwise, uh, the public pages, uh, uh, like, uh, the home page, we can navigate to.

What performance optimization technique do you apply when dealing with large dataset. Basically, I'm not getting the question clearly. Uh, please give me a few minutes, a few seconds to understand what actually the question is. So, basically, what performance automation technique do we apply when dealing with large dataset? Of, basically, lost. We're dealing with. Uh, I'm not getting, uh, the clear answer of this. Moving on.

For error handling, uh, basically, I use try and catch method, uh, uh, to do error handling. Uh, and, also, we have a life cycle method, like, uh, dispatch, uh, some component error error handling, uh, life cycle methods I do use, uh, for error handling. It was there in the class components, basically, these two methods I do use. And, also, I use, uh, TypeScript so that, uh, the predictable errors which you're asking, uh, can be, uh, for can be handled directly from the components. And for unforeseen error, I do use try try catch method. Also, with the life cycle error handling, we use to handle the errors.

See, uh, I've completed, uh, one of the next JS project, uh, where we are not using TypeScript in that project. Uh, I've used TypeScript in, uh, React JS projects and, uh, how you set up custom server side handling for Type API. So I haven't used this, but I'll go through this one, what you're asking. We need to add in types in next case for this. How would you set up custom server side handling for type k p?

Given this yet component snippet, identify the problem to give any defect when it comes to the fetching data. Basically, uh, we are doing here data fetching and without, uh, the dependency error, which will, uh, call this useEffect whenever it gets re rendered. So, uh, what, uh, happened that this will, uh, recall itself again and again, and it will, uh, keep on going. So we need to, uh, basically, it's, uh, there's no dependency area, so it will basically set, uh, Yeah. So it will set user user data, then component will rerender, then, again, it will be called, then, uh, set user, uh, and the process will will go on like this. It will, uh, not stop. So this is the issue here. So we need to pass in the second parameter dependency area here so that component so that this operation only happens when the component is mounted. Once when component is mounted.

In the typescript function, please explain what might go wrong if we don't properly validate the input parameter data. Please explain what might go wrong if, uh, we don't properly validate the input parameter data. Uh, what wrong if? Yet, then let's see the. If we, uh, don't define the type, uh, for the data, it may it will throw an error, basically, because, uh, it can be, like, any data can be basically, it will throw an error saying that, uh, data mister type, uh, miss, uh, the ID or name, uh, name does not exist, uh, on the data itself. Uh, so So this this will happen if we don't define the uh, so it can, uh, throw the throw error at, uh, compile time only.

What approach would you take to build a custom who can react that interface with them? Uh, what approach will you take to build a customer who will react that interfaces with an API to fetch and cache data. Uh, basically, I'll as I told you in the last project only, I I made a custom hook with use API, uh, where I do define, uh, where I take some parameters like, uh, API call function, uh, API function call where we do the put, uh, put request, uh, update request, uh, delete request, uh, add request, and all. So and in the request method of that custom use API hook, uh, which I created, I make an API call. So in that component itself, um, is that in that common use API, uh, hook, I can, uh, cache the data with the, uh, with the, uh, MMID, uh, with the, uh, the other function name key itself. We can, uh, gather data, uh, through which. And on the subsequent call, if the things are same, uh, we won't be refetching the data. Means, we can make a, um, custom hook, uh, for making the API calls, uh, like use API, and there we can implement our methods, uh, so that whenever we get the same, uh, we can, um, basically store with the function the function which we are getting. Uh, if it has same parameters, the, uh, same parameters, we can, uh, we can the we we can store the value of, uh, miss add the parameters as key and store those values. Parameter and the function add the key and store the API response. And when next time we get the same thing, um, we can get the that data from the cache data itself. So this we can do and, uh, we can improve when we are implementing this.

Uh, basically, when we get the, uh, miss, the Figma designs, uh, it have impact our project a lot because, uh, when we have all the, uh, pages and all the things at once, uh, at at one place, we we check for all the all the screens, and we can start with, uh, miscreating a common components which can be reused in multiple pages, uh, UI components, basically. So this this help, uh, is it, uh, saves lot of time. It it save lot of time, basically, and we can also create the common, uh, component UI components, which will which will be needed in the project reset.

Uh, basically, I do use uh, material UI. Uh, must depend on the project to project. We can use multiple, uh, things, like, uh, bootstrap can be used, for making the, uh, UI components. Bootstrap can be used, then we can use our own CSS, uh, in JS modules, then we can use style component. So these are few things we can say that that can be done from our end. Thank you.