Ajay Yadav

Yeah. So I'm, uh, having a background as a front end developer and, uh, having, uh, like, uh, 3 point 7 plus years of experience on front end and mainly working with the React JS and have also worked on the bit of the part of the Next JS as well. And I have, uh, done I have worked on the CSS, uh, CSS library, uh, frameworks, like Bootstrap, Tableau CSS, and Material. And I have, uh, worked in a very, uh, like, in different architectures, and I have worked in, uh, 1 creating the on making the it the projector very scalable and having to be placed it as a, uh, scalable so that, uh, sometimes we will, uh, our codes. So we will I'll we will use to our project in a way that, uh, our business logic and our, uh, main CSS styling files and the HTML part. Uh, this all will be in a, uh, same folder but in a different file so that it should look, uh, very clean and bored. And I have, uh, worked on many of the, uh, project. Like, I can say that, uh, my first project worked at.com. It was for the Canada based client, and I was responsible for building it from the scratch and delivering it to the client, uh, completely. And I have done it, and it is also live yet, uh, 10 today. And then I have, uh, worked with the US Bank, uh, team. There, I have started their first project, uh, for the company and have helped my colleague in setting up the architecture of US big storage module. Uh, and then I have worked with the, uh, Texas based startup called, uh, ESG World. ESG World was having, uh, their first product to be launched, uh, and that, uh, I took the ownership, uh, in almost, like, in the middle of it. As soon as the project get resumed, uh, I take the complete ownership and, uh, have a good the client, uh, for, like, 1 to 5 years and have was working with, uh, having, like, 4, uh, team members for that. And I was, uh, the 1 who was, uh, directly engaging with the client and gathering, uh, requirement and discussing, uh, all the requirements, uh, with the client and giving him that deadline for every Monday and giving up the demo, uh, as soon as we complete, uh, the sprints. And we were we were also managing that product. I was also managing the product, uh, building up, uh, the, uh, creating up the tickets and, uh, then moving up the all the complete, uh, Canva board on the agile methodology. And then I have a after, uh, successfully, uh, net, uh, onboarding, uh, the top 5 oil and gas industry veterans of Texas on their project, I started working with the Amnic team. It's a startup, uh, by the ex cofounder, and we started building up with the NZ act, have the architecture and attribute design pattern and the talent CSS. Uh, many more, like, we implemented Storybook and, uh, Cypress for testing as well. And then, uh, I was, uh, then in this January, I joined another company, uh, the Acodas, and I was given the responsibility, uh, for the their new prototype, uh, project. It it's a Phoenix pay, and my responsibility is to, uh, successfully deliver the phase 1 of that project. And I I have, uh, successfully delivered in the project on time. Um, all my projects are on, uh, the HTS.

It goes to debug complex issues. Yeah. Efficiently React Redux app. Uh, so, uh, like, to debug complex issues efficiently in g 8, uh, RedX app. Like, uh, we first, uh, get to know from the top layer deck. Uh, okay. What is going to the issue where on the file or, uh, on the file, uh, the issues are getting missed. And then we start debiting that, uh, been, uh, is it if it is being about the breaking of the page, then we will cancel out the states and check, uh, what state is not, uh, getting there, Uh, Uh, and nowadays, uh, we will be writing up the, uh, test cases. As we know that, uh, um, already have the dependencies of, uh, JET 2 testing libraries, and we start writing up the we also, uh, sometime, uh, uh, take the approach of, uh, TDD, test driven development, and we initially start writing up the test cases for the file. And from there, we, uh, get to know that, okay, uh, if any of the test fails on changing any file, uh, then, uh, we, uh, before deploying it to the production, we know, uh, where the issue is going to happen, uh, because, uh, it fails in the, there, and we we can easily track up. And other than that, uh, we used to have this. Uh, like, we consoles our, uh, page, uh, where it is, and we, uh, figure out the issue, uh, on which component all. Uh, basically, we track up the, uh, jack tab completely, uh, where the issue is going to happen.

In large scenario, would you choose data through context for state management in React especially with performance in. Uh, uh, Linux and, uh, over context API. Redux and context API, both are basically used in a different, uh, environment when whenever our, uh, project is a very on a very large scale. And it is to be, uh, handled a lot. And there are a lot in very big, uh, models, and those models are. Then on those, uh, Rajesh Kapoor project, uh, always the Rudex, uh, is a king, we can say. And on the if we are, uh, managing the states, um, the data only on a, uh, like, module basis, like, okay, 2, 3 modules, then, uh, we can, uh, zap, uh, different different modules according to our, uh, context API also. Like, this odd context is being, uh, being used by the complete application, then it will be, uh, the complete developer in the index or, uh, index or app file. Uh, but if we are, uh, having, like, 2, 3 modules, so we can also implement the context API on the, uh, rep by repping those only modules and so that the other, uh, modules will not have any effect on because of the dead context. Uh, data come to that, uh, other, um, index income, uh, context API, uh, like, deduct is a much more, uh, better way to use it because it will not, um, make a project, uh, extra regenerative. But when it comes to the context API, so it we have to optimize after implementing the context API. We have to, uh, like, optimize a lot of to our, uh, our components because it will make, uh, the component, uh, sometime unnecessary, uh, reinterim reinter 2, 3 times. So if we are implementing, uh, context API, then we have to additionally, uh, write the code to, uh, memoize some functions.

How do you decide between the style CSS modules or style component in React app? Okay. In line styles. CSS modules. Uh, inline styles, uh, are having their priority the most, uh, whenever we are using. And, like, uh, if you can say that, uh, if you are writing the uh, classes in in the class names and styles in the class name, so those are all the inline, uh, styles that we are in, uh, giving it to the uh, But when we are, uh, like, separating our, uh, code, the HTML part, the business logic, and the CSS part, then it is always better to, uh, modularize the CSS. So we can, uh, so we used to, uh, separate, uh, the CSS modules of every component, and it will, uh, make our code, uh, better maintainable and scalable and easily readable. And style component is when we want our components to be, uh, like, having the elements, and those are those are ought to be controlled by us. So there, we will be, uh, like, uh, implementing a style component for our React applications. And, basically, uh, taillet, uh, like, CSS modules is a winner because I think, uh, that will, uh, give us the much better, uh, uh, scalability of our, uh, project. And CSS lines are, like, um, getting, uh, the attribute, uh, class name and giving it to there so we don't have to look out for, uh, many, many, uh, like, uh, have to change, uh, different different files to look, uh, to look or write the our CSF files.

JavaScript scope is like so to, um, command the JavaScript scope when integrating with the rest API. Uh, Like, uh, so we have to, uh, look out for, uh, the what will be the scope of, uh, the state, uh, that we are going to use. Like, uh, as you know, if you are, uh, writing this application in, if you are integrating the, uh, REST API. If you are using the Redux, then it is we we, uh, because the it, uh, it is having the 1, uh, store, and it will be wrapping up the whole of the, uh, project. And so it will be, uh, globally available, uh, to whichever component, uh, that want that, uh, state. Uh, but when it comes to, uh, like, of calling of the REST API and creating the REST API in the same component, and so there, we will be using the, like, uh, internal uh, state. So so that, uh, if you are not, uh, passing it to the that state, uh, which is having the result of the rest API. If we are not passing that to the, uh, child component, then, uh, in or directly, we are using it in the only in the parent, then that state, uh, the the JavaScript scope of those data will be, uh, restricted to that parent only.

I didn't see that the user interface remain consistent across different part of React application. If you want our, uh, user's interface to remain consistent over different part of the application, then we will be, uh, at the time of declaring of the, uh, routes. So, uh, we will be having a blank route, uh, lapping on our own complete route. So and we will be providing it with the structure with okay, uh, that if we want, uh, left sidebar, the middle part of, uh, on the screen and or even the right, uh, sidebar. So we will be implementing that structure on a, uh, main route level, uh, route wrapper, and there, we will be implementing, uh, the children or left children or right children as an outlet. So if the left children, uh, the middle, like, outlet. So it will be, uh, only whenever the route inside the route, like, uh, routes, uh, slash dashboard is having that element dashboard. So, uh, that will be, uh, comes directly into the space, uh, whichever the outlet being, uh, provided it to. Like, uh, we are having left sidebar, and in the middle, we are, uh, passing that outlet as a children. So whenever the dashboard or the about us page, whatever page will be, uh, come, so these all will be shown in that, uh, particular area only. So we'll we can, uh, maintain our interface, uh, the same, uh, throughout our, uh, data.

Okay. Then then the Linux connected. Z component's embed identifying explain the mistake while trying to dispatch Data is connected. Identify and explain the mistake when trying to dispatch an action to data storage. K. So it will, uh, we have our directly linked this dotbox. Dispatch, but we, uh, in this, we haven't, uh, we have not, uh, any of this, uh, function, uh, because it's a class. So the constructor and super props need to be must need to be here. So as we have written the this step prop dot dispatch dispatch method in here, we've been taking a type and payload of the, uh, action. Uh, but, uh, we don't have any, uh, props. Uh, the props is not, uh, accessible to this user profile component, um, because, uh, we have not even, uh, initialized it with the, uh, construction function. Because construction function and the parameter it has as a props, then only we can be accessible, uh, those kind those props in the, uh, this, uh, component like that. It has to be, uh, it had to, uh, have this, uh, constructor method in this. So that is, uh, being missing now from this, uh, code. So just to because it then it will not, uh, going to, uh, call this dot or drop the dispatch, and that will not, uh, going to update. If it's not dispensed, so the data will also not be updated in the store as well.

Let's remind the react work you say function component. This is a bug that prevents the component from functioning correctly. So under you have to come. You see. And then that component from functioning correctly. Can you identify the bug and if function correctly. Okay. Alright. It is a studio user state, and we have defined with 0. Use a useEffect. Const interval equal to okay. SetInterval. Alright. Set seconds. 2nd to second plus 1. On returning, uh, it will clear out the clear interval date. Function. So it's having the second state and set second method completely. It's a set interval on every second. It is going to, uh, update the seconds. So firstly, uh, it is not a, uh, custom hook. So if you are, uh, there's a confusion that if it is returning the seconds, seconds, uh, return the second seconds, so for that, it's first have to be the, um, custom hook. And for that custom hook, the name of the function should be start with the use. Uh, so it should be like use timer component. This should have to go, uh, to maintain, uh, to get fastest, uh, seconds out from, uh, this. Uh, we uh, it has to be the, uh, this custom hook with the name use time by component.

When the face condition, they need to skin. How would you reflect it? Okay. React architecture. Okay. If, uh, we have to, uh, uh, reduct architecture as well. Okay. Refactile it. So if we have to scale our, uh, zed application on a larger scale, so we first, we are going to, uh, use the Redux, and we will be implementing, uh, the Redux, uh, files, uh, based on the, uh, like, components. We will creating, uh, the action, uh, files according to the component and the reducer files according to the, uh, similar to the component name so that, uh, whenever we are, uh, in our Redux, we will have a maintain the Redux folder, and we will be maintaining up the, uh, like, inside the Redux store folder or Redux folder, we will be having this, uh, 1 folder for the action, 1 folder for the reducers, and another, uh, file for the store, which will be, uh, have integrating all the reducers. And so, uh, to easily maintain those, uh, accent and reducers, uh, separately so that, uh, whatever the size of that, uh, redux, uh, will or the, uh, project get increased. Uh, so we'll be having a lotter, uh, file for this, uh, actions. We will be having separate file for, uh, every, uh, component actions, uh, so that, uh, in future, um, we will it would easily, uh, we can, uh, add another file so that, uh, it will not get a hamper or it will not have any effect on another file as well. And same as the reducer, we will be creating, uh, separate files for the reducer as well. So, uh, and we will be having, uh, like, we will, uh, get the naming combination, uh, reporting on the files, uh, from the start, uh, on from the starting only that, uh, get, uh, x z component and get the naming should be like x like that only. Or we can have, uh, the architecture in a way that, uh, like, the the big, uh, z 8, uh, is having this, uh, like, we believe we break the component architecture also, uh, in that way only the pages and that uh, module folder. Then in module folder, those, uh, sub pages, uh, that will also have their own, uh, folders. And inside the folder, the, uh, in every folder, every component or, like, uh, every, uh, like, component, we will be having the name with the component, and then it will have the it is your c CSS file, separate CSS file, the main, uh, business logic file, t TSX TS file, and the HTML part, dot dot TSX file. And, uh, we will be having if we are, uh, having this Redux, so we'll be having the action and reducer file also, uh, on the file, uh, like, 4 to 5 files, uh, or in test files in that, uh, on same component folder only. So whenever we, uh, we'll grow the scale or we will be reducing or removing any of the module. So it will be very easy for us, uh, to just comment it out or just scale it up by, uh, this architecture.

How do you utilize a multi, uh, uh, multilanguage reactive teaching effectively. Uh, to localize some multilevel language, uh, yet applications, uh, we will be, uh, implementing, uh, some libraries which are coming to, uh, handle handle the, uh, multilanguage, uh, file. And we will also maintaining, uh, all the, uh, sentences and constant values in a separate, uh, file. So, like, uh, f and we would be like, everywhere, uh, like, uh, there will be a constant folder, and it will be having, uh, cons separate constant for routes, uh, so that, uh, it will be easy to maintain and, uh, change up in the, uh, later in on any phase of the project. And same as the, like, uh, if we are, uh, having some in the dashboard, we will be having some tagline. Uh, so that also being put into the, uh, same context, uh, constant files only so that, uh, whenever, uh, if it is being used in the 3 to 4 places or in there only, then we will just go there and we will update our language. And and when we will maybe, uh, using those, um, multi language uh, libraries. So it will also be, uh, very handful for us, uh, so to easily, um, manage those.

To deploy it. Profile. That will put the performance of React. Uh, to improve the performance of the React application, we will be, uh, implementing the dynamic loading and lazy loading, uh, concept, uh, which we have so that, uh, the bundling bundle of the, uh, date application, uh, as soon as you are browsing any of the page. So it will only download that, uh, small chunks and small bundles only, whatever is required, uh, not necessarily, uh, load to those other pages. So we will be, like, uh, implementing laser loading and, uh, suspense, uh, to control the fallback of the UI. Uh, like, basically, the lazily loading, uh, so it will be must to have this uh, dynamic import. And on the route, uh, route router level only because, uh, as soon as, uh, this that x y zed route, uh, strikes, so it will first, uh, check on the, uh, the period level on load where the route is being of, uh, when the in the SPS. Uh, so we have implemented the create, uh, this, uh, with the rendered with the, uh, route, documented, uh, the route. So it's a single page application. And then there, uh, from the app dot TSX, it will render the app dottsx, and there, uh, we do have a wrapping up the our whole application inside the route. So this will be first, uh, check up the routes. So first, we will be, uh, breaking up the route in the modular fashions. So if, like, at widget, uh, that we are having over this xvj.com/, uh, allowed, uh, dashboards at widget slash, uh, about us. Uh, so it will be if the the dashboard, uh, does not so we will, um, make up our routes in our module efficient. So if dashboard does not change, so it will firstly, uh, just remove half of the routes of the dashboard. So, uh, we will have all the, uh, complexity with the, uh, logins. So and when it will, uh, reaches, like, uh, x y zed and and it there is having, like, only 5, 6 routes. So x y zed and all those 5, 6 route will also be not, uh, noted, uh, because we have, uh, dynamically import our component and have implemented the lazy loading and the, uh, suspense, uh, to give us the fallback UI. So it will be, uh, very easy. We we can easily maintain in the, uh, and improve the performance of our React application. And on the task component level also, we will be, uh, implementing this. Uh, we all can also implement this, uh, lazy loading so that, uh, only that portion of that, uh, component will, uh, render whichever is, uh, in the focus. And we believe we, uh, employ, like, uh, implement techniques, like use memo, use callback, and some other, uh, functionalities, uh, optimized code so that, uh, it will have the, uh, good, uh, performance of our, uh, data application.