Chandan Kumar

My background is as follows: I hold a bachelor's degree in computer science, and I started my career as a trainee in React at SmartVoice Technologies. I then moved to Net Solutions, where I gained knowledge of React Js and began working on live projects. Currently, I'm working for Quest Global. In my current role, my responsibilities include developing React components and designing websites with API integrations. I manage the front-end aspects of websites like GeoCloud Games and Geo Creasy, as well as related platforms. My primary skills include React Js, Redux, TypeScript, JavaScript, HTML, and CSS.

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

How do you handle API tickets in here? So, basically, I do store the after login, I do store the token in the local storage itself. And there, also, if we use interceptors where if the token expires or it is not valid, I navigate them to the login screen itself. And for routing purposes, I make private and public components. So in the private one, I check if the token is there, then I'll render all the authentication pages. Otherwise, the public pages, like 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. 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. I'm not getting, the clear answer of this. Moving on.

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

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

Basically, we are doing data fetching and without the dependency error, which will call this useEffect whenever it gets re-rendered. So what happened is that this will recall itself again and again and it will keep on going. So we need to basically, it's there's no dependency array, so it will basically set user data, then the component will re-render, then again, it will be called, then set user, and the process will go on like this. It will not stop. So this is the issue here. So we need to pass in the second parameter dependency array here so that the component, so that this operation only happens when the component is mounted, once when the 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, we don't properly validate the input parameter data. what wrong if? Yet, then let's see the. If we, don't define the type, for the data, it may it will throw an error, basically, because, it can be, like, any data can be basically, it will throw an error saying that, data mister type, miss, the ID or name does not exist, on the data itself. so this will happen if we don't define the, so it can, throw the throw error at, compile time only.

What approach would you take to build a custom who can react that interface with them? What approach will you take to build a customer who will react to an interface with an API to fetch and cache data? Basically, I'll take the same approach as I did in the last project. I made a custom hook with use API, where I define parameters like API call function, API function call for put request, update request, delete request, and add request. In the request method of that custom use API hook, I make an API call. In that common use API hook, I can cache the data with the MMID and the other function name key itself. We can gather data through which. And on the subsequent call, if the things are the same, we won't be refetching the data. We can make a custom hook, like use API, and implement our methods so that whenever we get the same parameters, we can store the value of the parameters as key and store the API response. And when next time we get the same thing, we can get the data from the cache data itself. So this we can do and improve when we are implementing this.

Basically, when we get the Figma designs, it has a significant impact on our project because when we have all the pages and all the elements at once in one place, we can check all the screens and start creating common components that can be reused in multiple pages, UI components, basically. This helps save a lot of time, and we can also create common UI components that will be needed in the project reset.

I do use Material UI. It often depends on the project to project. We can use multiple things, like Bootstrap, which can be used for making the UI components. Bootstrap can be used, then we can use our own CSS in JS modules, or we can use Style Component. These are a few things we can do from our end.