Aakash Bhardwaj

I have a total of 5 years of experience as a React JS developer. I have 6 years of experience working in the industry. I've been working as a JavaScript engineer with experience in both front end and back end technologies. In back end, I have very hands-on experience with Node.js, Nest.js, and related technologies such as Express, microservices, Kafka, and databases like MongoDB, MySQL, and others. In front end, I've experienced with React and Next.js, as well as Redux and other front end technologies, including HTML and CSS. Apart from that, I have experience leading a team, having worked as a senior software engineer and leading teams of 5 to 10 people.

I collaborate with back-end development designer team through a mutual collaborative approach that I follow, such as agile practices. I look at the design, the Figma, wireframe, and try to understand the designer's perspective. Then, I talk to the back-end developer about the APIs and what they are expecting in terms of payload format. I also find out what the payload structure will be and what they expect in their proper format or JSON. When a problem arises, I think of it as second-order behavior and consider what will happen if I implement a particular solution.

So recently, I was working on a Fintech project. It's basically a crypto-based thing. What happens is the price of a cryptocurrency keeps changing every second or something. There's a whole list of tables where you have multiple things. You have to blink up the table row whenever the price has changed. Let's say something has gone up from the current price; the entire row should blink up as green. If something goes down, it should blink up the entire row as red. That's something I had to do using JavaScript in React. So, that's something I've never worked on before. I wasn't aware of how to do that, but I was able to figure it out after going through some manipulations of useEffect and trying to do it with React. I was able to do that. So, that was the challenge.

How would you identify the bottleneck, and what metrics would give you optimization? Okay. So sometimes what happens is that as a premature developer, there's a classical example of use effect for that matter. Generally, people initiate a call, and then they forget to return it back, and that causes leakage in their application. Similarly, there can be multiple areas where the leakage can be there due to the coding practices, the bad coding practices. Sometimes, it can also be because of the way you're calling APIs or receiving data from the APIs. So there cannot be only a single pinpointed problem that you can solve when we talk about optimization and all. But there can be multiple such things, and one of those can be looking down to the codes, like what things are there, some bad practices being followed the way I talked about the use effect example. Things like that. And, yeah, to overcome this, primarily, there's a React build that we make, the optimized build. That should not be very huge, sized in gigabytes or megabytes for that matter as well. So it should be very small in size. And after that, yeah, there is a dev tool that we can use to check what are the issues and rendering things. But a sudden spike in traffic is not just a front-end problem. That has more to do with how things are working in order in terms of routing, load balancers, and

Okay. So internalization, when we say, first thing is the language, Like, I'm in US, I'd see something in English. I'm in India, I should say something in Hindi. So for that, we generally, if we are using state management like Redux, we'll maintain a global document where we'll keep translation scripts, like whatever is something said in English, and then what will be the corresponding Hindi word for that. Yeah. So things like that. So it happens through that global file that, so far, I have worked for a prod project in Germany, and there we were doing this. It was a big company in the automobile industry, and then we were doing this. Like, we had created a global file where we were keeping all the translation scripts, and then that is what we consume in our application.

For a large React app, I think Redux is what I would go with, because so far, that's what has been working for me in large applications. Like, I have worked on some really large projects. And for state management, yeah, I'll definitely go with using.

So, right now, as we can see, A's is an optional parameter here. Right? So that means if you pass in data and there's no age property, as mentioned in the problem statement, it is not passed to render user, especially. That will still be fine because age is an optional parameter here. But, at the same time, the user object has a type of user, which has three elements: ID, name, and age, of which age is optional. So mentioning case value is not necessary here.

Yeah. There is a show. When you say if there is nothing, like, there is no user data available, you are returning loading. So, the return statement, either you have to put this loading thing in front of return. Otherwise, you have to wrap it with a small bracket. And that's how it works. Like, the second part of that is that return and then that small bracket. That works fine, but same should happen above. Otherwise, you should take that loading text in front of return. Otherwise, it will break. It will not work. Okay. And potential unnecessary render is good. Yeah.

So, yeah. Like, React DevTools is what I would use here. And whenever we see, this is something that I have observed with some junior developer as well, like, they're working, sometimes you change, you hit a button, but it's not updating on the UI. That happened usually. Like, the primary reason can be that the way React works is, it renders only something when the state has changed via state. So, in a functional component, we use useEffect and, sorry, useState. In a class-based component, we do this.setState. Sometimes people do what? They say let name equals some value and then directly reassign it, name equals this. So, this way it doesn't stop. You don't know how to enter things if you don't specify it via state-changing protocols. So, that can be a reason. Other than that, we have to check via dev tools. We have to add a debugger and check if there's something more.

So for this, yes, again, globalization is what I will do for language support. So, basically, we'll follow up on something called a global file where we'll have all the languages and their translations so that we can access that. And whenever we need to change it to some language, there will be sufficient data available to us. So, as a JSON format or something, key-value pair.

Service worker, I don't have much experience with that, but I know how they work. They basically optimize. For example, a service worker helps to do things that otherwise a single parent process would do. Now, there can be multiple service workers which do it for you, so this can be a multithreaded kind of scenario. An asynchronous thing can happen.

So, as a designer, I have worked in architect-level discussions and contributed to system designs. Primarily, I had to design a dashboard for monitoring different services and their health status. I followed the molecular structure of HLS, used Redux for state management, Axios for API calling, and MUI for UI-related things like forms and dialogues.