Saikul shaikh

Yes, sir. So I'm. I have 11 plus years of experience in front end technology, and I have worked on React. Js, Redux, Vue. Js, Vuex, JavaScript, and TypeScript, HTML, CSS, JSON. So all of the front end technology I have worked on. And I have worked on multiple projects as well, from India to overseas experience also I have, uh, which is in Riyadh, Saudi Arabia. So I have worked on few projects, which are like, uh, this. Uh, one is e learning. So elearning is the study materials for the student, which has, like, few drag and drop options. So these are the most of the study materials I have done. Then I worked on eticketing system where the user can purchase for any events online ticket, and the email will be sent with the PDF on successfully email. And, also, I have worked on employee management systems where, uh, employees' attendance or latencies or any other KPIs or appraisals will be monitored. And the based on the performance will be also be monitored. And also, I have worked on, uh, supply chain and optimization forecasting in many, uh, this kind of product where we will do track for the retailing or the retail stores and records. So, yeah, this is my small, uh, journey for 11 years, front end technology.

So tree shaking is in Webex. So the how this will improve? So tree syncing is in the Webex. It's like, uh, kind of structurization, uh, of entire Webex application, where we'll use bevels and other JS file for, uh, the entire system to be, you know, configuration. So if I give you an example, like, uh, the start point of the application or the end point of the application to be defined there. And in in a specific, like, uh, JSON or dot JSON file, Or if we have kind of ENV files over there in the, uh, config, uh, management for the entire entire application, it is also there. So in webpack, what will happen, we'll have to you know, if anything missing or it is not there. So, manually, we can configure those, and we can up update, uh, those things, uh, in the web page to execute entire product. But, uh, yeah, mostly, uh, once we'll install the NPM package through the, uh, package manager, so these things will be taken care. If manually, if anything is not available, we can do that, uh, by manual config through the webpack.

So side effect, I which we can handle, uh, in the React component. So for the component, uh, effect have the component, uh, rerendering. So I have been using, uh, I will tell you from my experience. I've been using, like, a functional component. So where mostly we'll be use use state hook, and there will be useEffect hook. So to maintain the dependency or any kind of side effect for the component rerendering or the this dependency injection inside the useEffect array. So you can put it down on, uh, 1 by 1 if the dependencies or any API calls are there, uh, external API calls are there to be hold the data or anything else work to be done in the dependency. It can be done through the, uh, useEffect, uh, through the useEffect to hook. And, also, once it is done, if you want to destroy, you can all of the work is done in the inside of the user. Then, uh, we can write a new, uh, code, which is a return, uh, to destroy the entire created the component. So we can, uh, we can add over there.

Why should we use TypeScript interfaces? Well, type yes. So, yes, the TypeScript interfaces, uh, should be used, uh, you know, in, uh, I think, uh, most of the, uh, product, which enterprise level or the, uh, highly scalable or big, uh, product should be used, uh, the TypeScript interfaces. This one is, uh, you know, uh, very organized way to write the code, uh, uh, better than JavaScript, the traditional one or JavaScript. So what will happen here, the types are, you know, predefined, and it will be if any kind of manipulation is going on, if multiple, uh, developer is working on in the same file or using, uh, kind of, uh, same, uh, scope or variables or anything. So what will happen, uh, it will, uh, reduce the chance of conflict and or overlapping. And also, uh, because of this type or, uh, type and, uh, declaration, so it will reduce the, uh, chances of, uh, you know, conflict or any kind of data overlapping in the, uh, run time or, you know, while developing the entire application. The type aliases are more appropriate, uh, because it will has the meaningful, you know, meaningful, uh, naming convention. So user can, uh, data developer can easily understood and declare any type, uh, aliases. So, yeah, these things are, uh, really, uh, good new features for the TypeScript and should upgrade to TypeScript instead of vanilla JavaScript.

JavaScript to NC function. 1 c. Yeah. So, uh, the technique in JavaScript to ensure a function can call only once. Mostly, I believe, uh, to call the anonymous, uh, function. If you call through the anonymous, uh, function, so the function will invoke uh, immediately and call once once, uh, the application runs. And if you use arrow function as well, so instead, if the reference is called once, it will call once. If reference is used in multiple places, then it will call called more than once. So I believe, uh, if it is a direct execution of a function, then anonymous function will be, uh, better approach for this, like, whenever it is invoked and called. That's it. And it will call, uh, once forever.

so let lazy loading component in the react app which is very good use for the performance and optimization let me explain a little bit so if you are loading let's suppose you have a lot of images or a lot of blocks of data or there so entire page while loading the page so it might get you know a lot of load while first your initial load so what will happen if we use the lazy loading for the components or blocks so what will happen slowly maybe the limited time of limited component or blocks will be loaded at a time so in that case what will happen the entire page performance will be increased or if there are kind of heavy images to be load so this is also very good way to load entire content because using the lazy load it will enhance the performance of entire application so the browser won't get crushed or entire application on hold up for loading that time will be reduced as per the content yeah so these are the advantage for the lazy loading

Looking at the following react code step, and we explain why the component may not updating as expected to see data function is called. Cost data. Same data. Instead, null. K. Use it at which data response. I think the data used in the use state, we have added as initial data as null. Then useEffect hook. We are adding the dependency of the data. And this dependency will be a hold on after the fetch data will be called. So at the beginning, it was waiting for, uh, the data use state, which is null. And later, it is trying to update the data. So the here here is some syntax, uh, need to be manipulate from the useEffect dependency. Then the set data will work, uh, correctly. Yep.

Given this TypeScript function, explain why it might throw a type error when being used and how you might correct it without changing the function's image. Number, by the moment will go to 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0. So here is the issue, this TypeScript function might throw an error because the same get length function is, TypeScript function is calling with the array of first one, 1, 2, 3 which is number, we have decided here in the get length signature that all has to be number, so first one will run and it will return the length, for second one we are sending the get length hello world, hello, world, the syntactical error will be there, so for that reason it will not work correctly over there.

how do you refactor how do you refactor area application to replace class component function component without sacrificing yeah so I did it practically my previous product so it was written on the class component and basically class component will has a own state and it can share the state with other class components but function component doesn't have the state own its own state management for that we need to use the hooks so now without sacrificing performance we can instead of using the entire life cycle of the class component like that in hooks sorry function component we will use the hooks like use state use effect and use reference other multiple hooks are there so there we can easily you know do the state management and declaring the global variables and the data data to be stored and once any API data is coming so we will use the use effect and use his dependencies and in that case it will be you know without any kind of performance lagging it will work absolutely fine and syntax or code readability wise or maintainability will be increased multiple times better than class component so the performance of the product we definitely get impacted and it will be you know much more faster or much more optimized

What metrics do you consider important when writing unit tests for front-end code? So for me, for the unit test writing, there is a library called React unit test cases or there are other external libraries which is Jest for the unit test cases. And for end-to-end, there is Cypress, I have used, I am familiar with those as well. So for the metrics, we will use, I think, the common one with the React. So once we will, any component has been deployed, sorry, built for the first site and we will test first as a developer site unit testing. Once test is done, so we will write for the same component, we will write a unit test case against the component and we will have some expected return if it is, you know, data string value or a specific number or anything. So based on this, we will write down the test cases and we will run the test case and we will see if the component is behaving the same way or it is returning or not. So then the test cases will be done and it will be written for entire component. So I will choose the way, I will choose the way of, you know, designing the test cases after the component building is done and expected return will be there.

So strategies strategies is, uh, simple for the test driven deploy development in the Yext project. 1st need to be clarified. If it is in this unit test cases is there, uh, required. Or as I said, Cypress, uh, is another tool which have the end to end product testing. So where where if it is, uh, where we need to write down for the unit test cases. So I will use the React internal plug in for the unit test case writing or JST will be there. So after each and every component is built uh, or if any component has been computed, uh, and the testing is done by locally, and then we should write down the immediate, uh, test case again, the, uh, against the component. And we will start testing on that if if the component is working correctly or not. So similar way, we can do that.