Farid Shaikh

Could you help me, uh, understand more about your background and by doing a deep introduction of yourself? So myself, Eric Shek. Uh, I'm a project developer. I have 9 year of experience, and I have worked on various technologies like HTML, CSS, JTV, JavaScript, WordPress, PHP, Shopify. Uh, now since, uh, now for last 5 year 4 years, I have been working on JS, uh, libraries framework like, uh, React JS, Node JS. And most of the recent projects I have been working as a front end developer on VH. Js, uh, and I'm good at both, by the way. Uh, in front end, I can make design responsive using any tool like Bootstrap. Any UI tool like Bootstrap, Matilda UI, Tellman UI and I can write custom CSS if needed and I can make design from any tools like sigma, photoshop and I can create full responsive events from Figma, and it will be exactly like Figma is provided. So I'm very good at front end, and I have knowledge of bacon too. I I have worked on Node. Js, Express. Js. I have created several APIs using Node. Js also, and I have knowledge of hostings too. Uh, I have one on AWS. In AWS, I have deployed several, uh, applications, uh, the JS application, Node. Js application, and I have also created CICD pipelines through a GitHub to AWS is is to install. So whenever we pushed any code in main branch so it will directly uploaded on the server and visible to the, uh, global. And I have worked on, uh, GCP also. I have knowledge of Firebase too. In Firebase, I have worked on Firestore authentication and extensions and functions. And I have knowledge of, uh, version control systems like GitHub, GitLab. So overall, I'm a full stack developer with great experience in front end technology. Because from the beginning of my career till now, I am continuously doing work on fronting and creating designs from Figma.

How do you handle error when multiple API call fail in a React component? So if we are, uh, calling multiple API in a single component, then there should be a sequence of APIs. Like, we can't simultaneously we should not simultaneously hit multiple APIs at a time. So we should first of all use, uh, use state and set variables initial values something like 0 or false then initially we should hit an API which should initially be hit and we need the data initially for that. So if the API get some error and, uh, API call get failed, so we can use that, uh, variable state variable To identify the API is failed, we can use try catch. And in try catch, we can, uh, call the API. So if API call fail, we will make it, uh, we'll keep it false. We do we will not change the variable value. If API call get successfully called then we will make it true or one So we will get to know that API call is failed or not. So if it's it is failed, so we should not call the next API. And if we are needed to call the next API, uh, it is required to call them together. So similarly we can use try catch for agent API, we can use separate state variables for each API call and we can identify that the API call is failed or not. So by using state variable, useEffect, and try catch, we can easily handle error, uh, on API, uh, if it may get failed.

Describe your approach to implement dragable only sizable table column in a React application. So if there is a need to implement a dragable and resizable table column in that application. So first of all I will look for the library or packages that are available And before that, if we are using any UI component library in our React application, then I will look into the library that if the column resizeable and dragable feature is available in this UI or not even as in your note. If it is available, I will directly go for the, uh, available option in our installed library. If it is not available, then I will go for another package such the package which we can use in our React application and if I find that package then I will use it in application and still there is another option we can use we can create a custom table for that and we can apply some JavaScript and we can make it reliable and disable. So this is the approach we can follow initially. Then later on, we can identify that what we can do to make it responsive or all of the on screen sizes like if we open this in our application look bad because it's a resizable column in table so it will not look good so we should use fixed amount of width for that table and we can apply a scroller in our table so if we want to resize it to any width it will be in a fixed screen And there will will be a scroller which we can scroll and see the all of all the columns. The column. The size got increased, uh, a little more, then it will be out of the screen so to avoid this issue we can overflow auto and it will be, uh, adjustable automatically inside the bit. So these are the options we can follow.

Could you talk through your process for debugging a series of asynchronous API call in React? So if I want to asynchronous debug the asynchronous API calls in zi. So initially first of all I will check the starting point of the API that which need to be debugged. For example, there is an API. Initially, it is being called. So first of all, I will go to that API and I will start debugging. So to start debugging, first of all, I will apply trial catching machine. So it will really help to identify the error if there is some error coming from API or it is error from our side. So we can use Stripe Edge initially. And then if the, uh, and first of all, I will use the exos if I'm creating an API. So then I will go to the, uh, try block and see the API call is being made. Then inside the the try block, I will find the API call. Then if we are calling the API, uh, using the end function, so I will also we can also see the error in the end, uh, error block. So I will get to know that the call is being made properly or whatever it is going through the error block. So if it is going to error, so first of all I will console the response if the API is getting failed. Uh, so I will console the error variable and I will get to know what exactly the data is coming. And if it is not going to error, API is being called properly. So I will go to the get function and I will, uh, console the response variable. And I will debug the whole response variable values. And, uh, I use console log so that I can see the whole values there. And later on what I want to find, I can find using console log and see all the values that are coming.

How do you ensure component reusability and composability when developing a UI using React? So it is a great feature that React provides us that we can create component and we can reuse it anywhere we want to use. So if there is a clock first of all I will check the whole UI that if Figma is present then I look for the Figma and see that how many components are being reused in multiple, uh, places. So for example, there is a block where we are calling API and showing the data in a, uh, card format or something, uh, in this format like so first of all, uh, I have identified there is a component we need to create and can be you we can reuse in multiple places. So I will go to the code and I will create a separate component. I will create a separate file, create a separate component, and I will get the I will use props here to get the menu from the other components or NN components that are being used uh, about this, uh, usable component. And inside this reusable component, I will use user state if needed. Any hook which is needed, I will use it. Then I will write HTML CSS there. I will design the whole component there so it will be no, what we can say, dependency on other component. It will be a re reusable separate component which we can use in anywhere we want to use. So I will design the whole thing inside this component. I will write all the HTML, Hated, CSS then if we are calling an API we will need to show the data. So I will use their, uh, map function to render the data and then by using make function we can just show all the data we are receiving from an API. In that component, I will use in the area where we are just calling the API. So after calling the API, we will have the data in a variable or, uh, state variable, then I will pass this state variable inside this reusable component. And this reusable component can be called any way we want to show that show the data in this format. So this is how I will plan and develop a usable component.

What measures would you take to prevent memory leak in a React application with complex state management? So if we want to make sure that there should be no memory leak and there are complex state management So first of all, we should avoid using any unnecessary, uh, variables. If there are several variables, we should avoid using both variables in NetStream, uh, limited. And if there are any variables which are used or declared unnecessary, they have declared and they are being not used so we should remove those variables and we should make sure that the variable we are using should be initialized properly and should be lapped properly. And if we are using a React application and we need to handle the complex state, then we should go for Redux Redux is a great thing to handle state, and it can handle the state globally. So we can manage state very efficiently using Redux. So this and always we can, use to avoid memory leaks.

Given this API integration function, identify any major concern with regard to API error handling and explain what will be done to improve it. So anything major concern in any any any major Okay. So you have, uh, defined a function, get integrated data. You have all the, uh, URL parameter inside it. You have used the fetch method. You are calling API. You have used then then function, and in the response, you have just got the response for JSON function then you have again use then function inside this. You have used database variable inside data. You all just do console dot log, and inside the console log you are showing the data. And inside catch you are just printing error using error variable. So using fetch, first solution I will do is we can use Exeos and provide a great options to make API cons. Then we have calling we are calling, uh, then function. Okay. And, uh, we can also use try catch here if we are calling an API. We can make a try catch block also. That's another solution. And, uh, for if you are talking about error handling, then we gonna need some, uh, we we are gonna need, uh, the state variables. So error handling is error handling is being done here, but we are not using any state variable to get to know to the UI that error is being, uh, properly handled or not because if we are going to catch block then we need to find out a way to identify that we have got to the catch block and we need to show it on the UI too. So we should use any, uh, state variable which will we can use it, uh, to false. Each and each should be give it to false. If we go to the then function, we do we should make it to true. Otherwise, it will be false. So we will get to know that API is being called properly or not. So we can just conditionally show in our UI that API is called or not and we can show error message or error component.

Looking at this code snippet can you explain what might be the issue why the component is not re rendering as expected with the state changes? So initially you have defined useStateData and a setData function and there is a blank object there. Inside the useEffect you have called the fetchData function and then is called, uh, you are setting, uh, set inside the setData function is called 1 data. Okay. Notice the empty dependency. Correct? Okay. So it will only be called once. UseEffect will only be called once because there is an empty array dependency. And inside the get, uh, fetch data function, uh, API 2 seconds. So looking at this call snippet, can you explain what might be the issue? What is the problem is not reentering? Okay. So the reentering will only be called when the, uh, useState variable is getting changed. So in the below example you have useEffect and this useEffect has no dependency so it will only be called once. It will not be called again and again. So if you want to rerender it, you need to pass it some dependency based on the requirement we want to change only render the UI. So because of empty dependency, user set will be called only once and it will it will be only called at once, and useEffect with, uh, useEffect with only call once, and it will only set the data inside the data variable only once. So there will be no rerendering after once the page is loaded, and, uh, you have not handled the error here. So if any error is going to come here so it will not re render because you cannot use Sketch block here. You need to use Sketch block, and if you are using Sketch Lock, then you can get to know that, uh, an error is coming and you can handle it properly and you can use Set the data error data in your data, uh, variable state variables. So, yeah, this is the only thing I can tell you about this. First, you need to use dependency and then you also need to use scheduler and then error profile. Okay. And so we you are returning from okay.

What method would you use to dynamically load component in a React application to optimize performance? Uh, if I want to optimize the performance and I want to dynamically load the component, so I will separate the component first of all based on the requirement. I will divide the component that each component need to be recalled and based on the, uh, conditions that components needed after the specific things loaded on. So I will use some, uh, useEffect variable and I will use useEffect. I can use useEffect also. So why using useState and useEffect, we can identify that something has happened. And now we need to call another, uh, company. So on the basis of condition, we can then call, uh, the next component. So, initially, our application will be loaded fast. Then after conditions, we can call the next component which we are going to need. So after that component, we can also apply another condition. After that, this component will be called. And, uh, while you're while before calling this, we can use a loading component also which will just show show the, uh, show the loading text or just, uh, progress bar of the loading, then this component will cause it to be come after specific things happen or a specific component get loaded. So while using useEffect u userState, we can conditionally enter the next component, and it will be help us dynamically load it down for an and optimize the performance.

What strategies would you use to efficiently serialize and deserialize data for real estate management? Let me check. So I have knowledge of class framework of Python but I have very limited limited knowledge in the Django so I cannot answer this question very efficiently before I do not have very good knowledge in the Django so as I'm going for the front end development So it will be handled, uh, by the beginning developer. I have knowledge in Node. Js, but Django, which is something I have not really good knowledge in it. So

Discuss the techniques for the deploying React DG mobile application which means secure communication between client and server. Okay. So, uh, if we talk about re extend the Jango, as I said, I have, uh, no no no I have no good knowledge in the. So I can give you answer on the basis of React and Node because I have developed the application in React and Node and deployed these applications also in AWS. So first of all, if we are going to deploy it, there are the options what what we are going to follow. If I will talk talk about mobile deploying. So first, I will go to the AWS and I will, uh, create an EC to install there. I will create some inbound outbound options there, then I will install Node. Js and then I will initially, I will need some user service, either NGINX or we can use Apache also. Uh, if you go to the NGINX, we can set up the NGINX server there for our application. We can point our domain IP. We need our elastic IP also. Then we can manually create a key for our EC2 instance. So it's keep it, uh, either through our filezilla or we can use it directly using Forti. Then after logging through filezilla, we can upload a file file of the JS in our is a concern and will be accessible. So this is the part on the front end. If we talk about node data, then we want to also make sure that communication get properly handled. So, like, for the same EC two instance, I will install the EM two service. I will upload all the, uh, Node. Js code in a folder. Then I will go to the NGINX. I will create a separate server where I will set proxies where my application will be start and run. And in this it will be m two service. I will start my Node. Js application, you know, while typing p m two start and my application file in, like, f.js or whatever the name is. Then my application will be start, then I have set the proxy in g I next also. So it will be ready on the domain. Like, for example, I have set the server slash API. So whatever the domain is, yeah, I will use API. And my node here's application will be there. So, uh, I will use the ENV variable also import the front end and back end. So I will park the ENV variable, uh, domain, like, whatever the domain is, abcv.com/api. So all the, uh, all the application call will, take the EMV variable path, uh, API path, and it will be called in all of all the API calls. There will be no need to rechange in all the API URL. It will take the EMU variable, and it will be called easy efficiently. So communication for both the loops are similar to front end to back end will be will be efficiently handled, you know, if you use EMV variables. So I have deployed, and I have deployed the mechanism. Is it a stamp? And I know the domain, and I will give the path in the end variable. We'll be going.