Ramakant

So myself, Ramaganth, and I'm currently holding three years of experience right now. And in these three years of experience, I have worked in the front-end world. So in front-end technologies, I have worked with React, Angular, JavaScript, and TypeScript as their programming languages. Apart from that, I have also worked on the back-end with Express and Node.js for making APIs and creating back-end services. They have experience in the databases, which is two of them, like NoSQL and relational databases. So I have experience with two databases right now. And for the cloud technologies, in one of the companies, I have worked with AWS. And currently, I'm working with GCP, which is Google Cloud Platform. I have also integrated and used Firebase as well for storing requirements in the project, using Firebase's remote config and Firestore, which is placed in the front-end. So this is like, these are the technologies I have worked with and have good experience in. For the programming languages, I have worked with two programming languages. One is JavaScript, and one is TypeScript. I have worked with TypeScript for Angular and JavaScript, and I have worked with React. So this is all my overall experience and technologies I have worked with. Thank you.

How do you integrate third party like this with React and Redux while ensuring maintainability? I have, actually, got experience with Firebase as well. So, actually, I have integrated third party API, like Google and Apple, which are using Firebase itself. For integrating that, you need to create a Firebase account, and after that, you will get your whole credential in a file. You need to copy that file and paste it into your React project. After that, you press the required things from your API's key and secret token. So you fetch it. You write a function in your React component where you want to use authentication. I have mainly used Firebase for the authentication purposes. So I'm explaining that only. For that, you need to create a component where you actually want to show the user that your application gets signed in by Google, Facebook, and Twitter or Apple authentication. So you provide a button there. So you provide a button which says log in with Google, log in with Facebook, log in with any other social media application. For that, what you need to do is create a function, create the Firebase credentials, and then write a function, and you just call your Firebase authentication in your component. After that, when you successfully write that function, you can directly call it from your browser. So, actually, Firebase takes care of everything. This is one way by which you can integrate a third party library. And, like, there are multiple libraries, like in CSS libraries that I have worked with, like Tailwind CSS, whatever UI. So what you need to do for that is you directly just try to install the library, and then you can directly install it and use it in your component. For integrating third party libraries with React, the thing is it generally depends on the requirement. For state management, I have not seen any third party libraries, but I have worked with Chakra UI. So that is a third party library which I have used. In the Redux, you generally maintain your state. In the state management, you directly pass your state into your action and reducer. After that, you modify your requirement into the reducer. After that, you directly fetch the state from the store and wherever you want to restore it and whatever you want to use in your app, and you can directly use it. So like that, you can use library libraries without seeing the need to take care. Like it's a very huge library, and we might get our app much heavier. So we do not need to worry since NPM libraries are all very lightweight. So we don't need to worry. And by this, you can directly and simply integrate your third party library in your React and your Redux.

How do you ensure that the user interface remains consistent across different parts of the React application? Okay, so the thing is, first, it's like when you write your React components, it's a general practice that React favors reusability. So you write reusable components, doing so for reusability purposes. If any other component wants that particular component you've already built, you can directly import that particular thing into your current component. So, you can use that. And React actually gives you a very good file structure, so you can maintain all your components in a folder structure format. The thing is, we generally make our components flexible across all browsers, which is like, it can be used in the mobile version also, and it can be used in browsers and tablets. So we generally see whether our application is responsive or not. For responsiveness, you can add multiple media queries. But the thing is, adding media queries and creating a lot of CSS can make your CSS file larger than your JavaScript file. So, this needs to be handled, and when you use any third-party libraries, you can take advice from their docs on how this thing actually works. You can do some research on that. After that, you can directly use the third-party library, and they've built it such that you generally don't need to take care of responsiveness. These libraries actually help you make responsive components or a responsive website. So, you can use that, but if you're writing your code using HTML, CSS, and JavaScript, you need to take care of responsiveness and write your own media queries. Media queries are one of the best things to use. But, as I've mentioned, you also need to write media queries with precautions. Apart from that, you can use third-party libraries to make your components responsive. And, websites make responsive very well. Responsiveness is one of the things by which you can ensure that your React application can run on several platforms, like mobiles, tablets, and web browsers. In the inspector window, you have the option to test your application and see where it's breaking and needs to be fixed. Right, your course is that it can fit in that also. So, this is the way.

How do you implement error boundaries in React and can provide a use case where Redux might interact with those? Okay, so what's the cost for error boundaries? What are error boundaries? We first of all, let me tell you why we use error boundaries. So error boundaries help you to give you a fallback UI so that if anything goes wrong in your application, your application does not crash in the browser. So you will throw a fallback UI there. So for that error, you can write your functions as if you were to throw like write in the try-catch block. So whatever the things you want to display when everything goes right, you can write it in the try block. And if anything goes wrong, you can direct it to the catch block and catch your errors. Apart from that, you can also use throw new Error in your React. So whenever any error comes across into your component, you can throw an error. So in that error, you mention what the error is. And in that, you also generally pass the fallback UI there. So by this, you can maintain an error boundary and throw a good fallback so that your user does not get stuck or does not get something like that in your website. It's not very good and this is a very crashing website. So you can use this around your application. And apart from that, in Redux, when you make any asynchronous call in your Redux, you will see an error there, like the error recorded to the asynchronous task and you into your user. So generally, console gives you an error and also gives you a system that you need to use a middleware, which is generally Redux Thunk. For that, you can use apply middleware and call. And in the async calls, whatever you write your code in the reducer, and any error if you face in that also, you can use try-catch block. So in the try, you try whatever response you want to get into the asynchronous task. So you will get a response into the try block. And in the catch block, you can catch your errors. So by this, you can easily see your errors, give a user a fallback UI so that your application does not crash at that time. And the user cannot see variable errors, which we do not want to show to the user that this website is not up to the mark. So we generally take care of this. By this, also, you can maintain the errors in your React applications.

How do you prevent unnecessary re-renders in a React Relapse application when the state structure is deep invested? Okay, for there are multiple ways to achieve this thing. But the first thing you can do is prevent default so that every time your function gets hit, your browser does not refresh the page. So you can use preventDefault in that. For that, you need to catch an event there. So after catching that event, you just try to prevent the default event call. And it's a function, so you define that function. So, yeah, it's a basic thing to stop re-rendering. Apart from that, for memoization purposes, you can use manual use callback. So, if any task gets performed and if that state needs to be updated, so after updating the state, your component does not get refreshed. So it directly uses your cached value or last processed value and directly updates your state. This is the way you can do it. Apart from that, you can also achieve this using useEffect. But the main thing is, how well you have written your code so that you're using facts to maintain this unnecessary rate under. For that, if you want to ensure your application does not get refreshed again and again, you write a function. You write a function where you want to modify your user, update your user, and you pass that function into your useEffect. But passing that function into useEffect, you should pass a state in your dependency, so that if that particular state got changed, then only your particular component gets re-rendered again. So this needs to be taken care of, if you do not pass any dependencies. So you might get locked into infinite re-rendering of so that, you know, by this, you will see your application re-render again and again, and you want to stop it. So you need to do a hard refresh. Connect your part with the socket key for that. So you need to take care of that. And whatever method you can directly use it to prevent re-run with your React applications.

To optimize performance when fetching large volumes of data from the rest of the case in Redux, the thing is you can perform data fetching from the library, from the API where you think the data is coming and you need to cross-check the data. For that, caching is one of the most efficient methods by which you can ensure that the data you have got is not fetched again and again by the API. So once you file the data, you cache your data. All the data you cached, and when you cache that data, you can directly use the cached data. But, like, for using this, you can write a function and pass your whole function into the use callback where you are fetching your API data. So if a large amount of data has come, you fetch the data into the function and store the data into the function and pass that function into your useCallback or useMemo. So your useCallback is now actually behind the scenes, working with the caching itself. So if you write your function into your use callback, your function gets cached out. So, the caching is already taken care of there. This is one of the matters where you can think or you can achieve that you do not need to take care if data is coming. So our server gets loaded and our application also takes time to reload in the browser. So, you can use useCallback. Apart from that, you can use useMemo. So in useMemo, you have an option to write your function inside your useMemo, and useMemo takes care of your last values so that you use the previous process value and then apply your condition and however you want to process it, you can process. So, these are the three methods which I have known so far. One is JavaScript caching, and second is your callback, and third is useMemo. Generally, we try to use this to deal with data which is coming from the state.

There is a bug that didn't allow the component to function correctly and explain how to fix this. Okay, function timer. Use the const Interval ID is supposed to be a certain interval. Accept, return player to the way. Okay? Alright. So first, that we have to return, sir. So what happened is, you know, we need to remove the last return. And also, the previous return, which is handling clear interval. So in this, you actually want to achieve a last cycle method, which is unmounting after 100 milliseconds. So you need to take the return, clear intervals outside your setup, and after that, in the clear interval, you can pass your interval ID there. So by this, you can ensure that once the user, like, searches from one component to another, your previous component, which is this one, gets unmounted. I can see that this is the bug. I can see. Actually, this is one of the errors also here in the last line, a written sample. So you need to delete that as well and make that return to your interval outside your setup. So this is the thing which I prefer to fix this one.

And Redux connected React components method, identify and explain the mistake when trying to dispatch a action plot data store, how it should be corrected. Alright. Import connect from React and to update user. Okay? Class user profile, extended a component update user profile. This dispatch. Use that profile. So, actually, the thing is it's a class-based component. I have not worked with class-based components, but let me tell you what the issue is and how we can fix it. First of all, when you define an action like this, you need to delete the render method. This is the first issue I've seen in this particular snippet. You can delete the render method directly, just before the last one, so you shouldn't see an error there. Apart from that, I think everything is good. Let me ask again. I didn't find any instrument. So, what's the thing? You need to delete the render method and you need to return the update user in your render method. Okay. You need to write update to user in the return, and in the update user, you need to pass update user profile, so that your action gets dispatched. This is the thing we need to handle. Apart from that, this is correct.

1 phase with an application that needs to scale. How will you refactor the Redux architecture? Okay. The thing is, Redux builds our architecture so that it can just store and act on the data. So what happened is, if your application is large enough, you need to introduce a reducer or a state management engine into your application. So Redux is one of the things. What happens is, in actions, you write all the actions, like all the operations you want to perform into your component or into your application. You write and then in the user, you write your logic. Like, after hitting this particular action, what is the logic so that of that particular action will be. So, you need to write your logic into the right user part. And if any asynchronous operation also needs to perform, it should use async/await everywhere. So either you can use async/await or any other method. So after that, when you are creating multiple reducers, you need to wrap all the reducers into one reducer, which is the combined reducer. So, that actually you can import that combined reducer into the React reducer. By that, whenever you want to use your user into your particular component, you can directly write like, combine the dots, that should be particular with the surname. So, this is the thing which I ensure first, if I'm building a vertical application. This needs to be taken care of. And, yeah, this is the thing by which you can scale your application to any level. If you are building a very big application, you can take care of that thing, and you are good to go. No worries.

How do you address cross browser compatibility issue when developing a React application? Okay, 1st and the most important thing is that when you fetch an API, your backend application should have CORS policies. If you're fetching any API, that API should support cross-origin resource sharing. For that, you can tell your developer that if you're building an application that you want to test locally and your backend isn't hosted in the cloud, you can define a particular port number, start a particular API, and then use that API in your React application. By doing that, you generally won't get a CORS error. You'll see the error around in your console instead. Apart from that, this is actually a DevOps question. I'm thinking, if my React application is working in all types of browsers like Google Chrome, Firefox, Opera Mini, or Safari. For that, you need to write code in Docker images, so that once you deploy your application, you can check whether it's compatible in all environments or not. This is the thing you can check in your system using DevOps understanding. And I don't have very much experience in creating CICD pipelines, creating Docker images, and deployment. So this is all my best guess for this particular question.

Can I explain the concept of virtual DOM in React and how it contributes to the application? Okay, first of all, let me prefigure what the real DOM and the virtual DOM are. The real DOM is actually the DOM tree where your component is structured into a tree-like manner. So, your components are built in the form of nodes into your DOM tree. Anything that changes in your whole DOM tree gets rerendered. So, your whole DOM tree gets rerendered again. Since React is working on virtual DOM, the concept of virtual DOM is like a replica of the real DOM and actually handles the best case scenario of whatever the application server component is. And in that server component, if one component has anything updated. So, that particular thing gets updated and enters into your DOM tree, not the whole DOM tree gets rerendered. This is the facility given by React in the React application. So, due to this, your rerendering cost is very minimal, and your application is also robust and fast with virtual DOM. And virtual DOM actually takes into account whatever things have been changed. And if things have been changed in your component or in the server components, what your DOM sees in your application is the particular things that actually get changed, and this is the only thing that needs to be rerendered on the whole application. This is a very fast thing in React. If you give you a virtual DOM concept, your bundle size when you run your build command for building your application for deployment, by this, your application bundle does not get a very big bundle size. So, once you compare your bundle size with any other application, like Angular, you see the size difference directly, and your React size is very less. This is the thing that virtual DOM helps you to make your application robust and fast rather than fast to 10 other applications. Yeah.