HARsha VARdhana B

I am a web developer, primarily working on, uh, JavaScript and launch stack and focused more on front end compared to the back end. I have been working on, uh, web applications since 2017, starting with a simple static site server and plain HTML, CSS, JavaScript sites to React and Next JS based applications in in the latest, uh, projects I have, you know, contributed to. I, uh, tried a little bit of Python and web automation and data scraping in between, but I didn't stick much. But apart from that, I have been, uh, part of b to b to b and b to c web applications, uh, where I was, uh, founding engineer of the team. I later was acquired and part of the acquisition. I was part of the, uh, core team, followed by, uh, where I, uh, followed by where I was also, uh, responsible for, uh, bringing up the whole UI with, uh, a team of other, uh, UI developers where I had to, uh, take up the responsibilities of facilitating the feature discussions between stakeholders and the tech team. And, uh, you know, understanding the requirements from the stakeholders and marketing team and translating them to the, uh, technical stories for UI side. Later on, uh, we, uh, emerged into 3 different streams on the UI side, uh, because we had 3 different applications, b to c and b to b including. Uh, so I was more of a face of a whole front end team, uh, consisting of 10, uh, UI developers including me. So I was, uh, responsible for both, uh, understanding the technical, uh, stories and, uh, translating them to the UI stories on the scrum boards and, uh, running the, uh, update calls in the first half of the day and followed by, you know, a second half in assisting the developers, uh, and, uh, managing the load of the work. That was briefly, uh, for for more than, uh, close to 2 years. Later, I joined, uh, for a start up where I was a solo, you know, a solo contributor to the whole, uh, stream of non, uh, data scientists, data analysts, and, uh, business units to understand their UI requirements and build them a certain web portals to help them ease their internal work and understand their features better. Later on, I moved on to another firm where I helped them to productionize their prototype, uh, NextShares application and, uh, go to production in a quick manner while also solving their, uh, one of their existing, uh, onboarding issues, uh, and, you know, uh, smoothening their onboarding flow. And I also help them revamp their whole UI and deploy

What approach do you take to ensure APAC also made efficiently in React application already on the same network requests? One I would do is, uh, for the same fetch call or same post call, uh, on the same endpoint, I make sure that there is no duplicate calls are happening by basically make maintaining a simple flag when an API call is being made until it is responded or handled. Right? That is one basic, uh, thing I would do to avoid unnecessary network requests at the application level. Even at, uh, simple UI elements level, I I followed the, uh, the balancing, uh, rule to, uh, prevent duplicate fetch calls or such calls. These are the 2 major things I I I usually follow. And also disabling the, uh, user intractable components that would cause, uh, you know, post calls or any data submission calls. I I I follow, uh, you know, I I I disable the basically, I disable the UI image that would trigger the API calls. Once API call is triggered from the u u UA, uh, I disable the UI event until the request is processed properly whether it is

We will ensure that we use beta React command into different projects or teams. Oh, good. Great. This starts from designing, I believe. Uh, if we are working on different projects or teams, uh, with similar theme or same functionalities. I I start with the designing, uh, phase. I make sure that the designers are aware of this fact that we are trying to reuse conference across multiple projects or teams in a given organization or a given environment. And I ask the designers to stick to the same design standards and codes. And we'll, uh, play the same in the React components as well. While building the React components, we make sure that we, uh, we follow the same theme across multiple teams and, uh, projects. And having a style guide for these components is an add on. This way, we have, uh, you know, quicker feedback, uh, loop with the designers and the stakeholders of the components and reuse recompense that we are building. And I would maintain a different, uh, library altogether for this, and we can import components from that and use them as simple as that. And I I I strongly advise and make sure that the developers are following the same standard that they are not writing their own components that are already part of the reuse reusable or reused library or common library across the projects. If ever such thing happens, I I I also make sure that the PR reviews or, uh, peer reviews that are happening across the team are making sure that they are looking out for these kind of

What are your considerations when choosing between using a class component versus a functional component with hooks in React? There is no consideration at this point of time in current and latest React library functions. It is always hooks and class, pure function components. There is no class based components at all we are using. There's nothing that, uh, class class component could provide us that, uh, functional component with hoops couldn't provide. So there is no consideration at all unless I'm dealing with a legacy project that has been written in a certain React version that needs certain class component functionality. If not, I would suggest start your React project in latest and start using hooks and functional components. If you are using some old React version in a big legacy project, there is nothing we can do but, you know, follow the class cognate or at least try to migrate a little by little every once in a while and try to migrate from away from the class based and to close towards the function conference

Practices for ensuring accessibility in is a part of your React components. Components even though you are writing your own co React component to achieve the same. For example, uh, a radio button or a toggle button or, uh, or or any kind of input that you're taking from user, try to use an input tag in your React component while writing. No matter how much, uh, styling or customization you need on the component, try as much as possible to use basic HTML tags and semantics so that you can stick so that your React component at the end of the day, even it is a React component, it is translates to HTML and CSS. So the closer your React component render is to a HTML basic component, the better it is always. There are another example. Always link your labels to your inputs or link your labels to your uh, checkbox input so that the HTML render knows that this certain label belongs to the certain input or this certain label belongs to the certain checkbox. And try to follow same same stuff with forms, tables, lists, And and also, uh, follow follow as many, uh, try to use as many like, uh, using now and the header HTML tags inside your conference will just improve the accessibility to next level. You don't have to go and implement all the accessibility features of, uh, people who are very, uh, uh, for people with disabilities or anything. Just sticking to basic HTML norms will give you 60 to 80% of the

What steps do you follow to refactor large component to smaller smaller or more manageable component in React? SRP, single responsibility principle. Try to try to break down your larger component into smaller responsibilities even if the whole large pair component makes us sensible in a single component because it all does the same thing. Again in the same large component. Try to understand and break down the functionality of that large component and break it down into smaller functionalities first. The moment we can break down the functionality and responsibility of the huge large component, we can come up with smaller React components that could act on their own and be, uh, meaningful on their own. And we might need a little bit of common state or, you know, some shared state between these comment that can always be achieved by props and callbacks. But breaking down the responsibility, breaking down the functionality of the huge chunk of React component is what gonna drive us to the smaller and more manageable React components. The moment you can break down the functionality, you have already broken down the React components. It's just a matter of writing that React component to achieve the function.

Even this type scripts reproduce in a React code base, identify the potential could follow and provide an explanation. Interface person has name and age. Display person takes a person, console dot log, person dot name, person dot age. The interface person has name and age as keys and the data types provided in the interface and which is referred to in the display person function as person type, which will, uh, be utilized inside the function. But, uh, when declaring the person data, it there is also an additional, uh, there is an additional key value pair inside the person data, which is not expected and which might break the, the which might which might break the execution flow, basically. Either we could add one more, uh, you know, key called email inside the person interface. Or yeah. I think that I I I only think I think that's the only answer

How would you would you bug this piece of code in a real component where the data fetches from the API is not, uh, rendering as expected? Component did not fetch this dot state dot API data. API data is set to catch. Return some HTML tag or maybe react fragments to render that data. Currently, the return statement is simple, uh, JSON object wrapped in a flower basis, which is not a valid JSX format. Moving forward, if that is not the case, if that if once we wrap that, uh, JSX, uh, you know, JSON data in a proper HTML format. Then I'll check for the error if there is any error or not. If there is no error, that means the, uh, if the API call was perfect and the response is returned as expected, maybe the data that we are trying to render is not validated as in it's not represent full data. It might be an empty array or empty object or null. Null. Null could null null wouldn't render anything in a valid JSX format. It could be null as in. So, uh, if if there is no error and if the render function is returning a valid JSX format, the data might be null, so checking for the type and value of the data is the last

How would you refactor large Redux code base to leverage React's context API without losing the state management efficiency? How would you refactor a larger Redux code base to leverage React's Context API without losing state management efficiency. Always start small. Always, uh, pick up certain data set or, uh, the datas, uh, the, you know, uh, piece of data from the Redux that is small in size and used in lesser known known places so that refactoring becomes easier, and we know what we are dealing with. So pick up the dataset that is used in less spaces, less instances across the application, and, uh, has no impact. Refactor that first, implement, uh, the context API end to end in that manner. Once that is done, remove that from the Redux code Redux code, uh, state management and see if it is working or not. If it is working as expected, move on to the next and go on with refactoring. That's as simple as I could say it is. Pick up the least and small as possible and go far from there to the largest and most used, uh, dataset and refactor everything into more small, manageable context. Don't keep everything in the same context. Try to break down the context into as more and as meaningful as possible and as relatable. The context should be meaningful on its own and as well as should be reusable. Just because it is full and not reusable at all doesn't mean we create a number of unnecessary context. Try to keep meaningful data together and reusable data together.

Share ways to improve real time and reduce the bundle size of a large scale React application. Imports. Start with imports. Don't import a whole library just because you're using a certain model from the library. Import only whatever is import, you know, module based. Uh, if you can see, you can even in the dependencies in package. J s, you don't have to mention the whole package. You could mention only a certain module from a package that you need. And that way, you don't have to deal with the whole library while, you know, creating the bundles and bundling and sizes. And also try to use lazy imports, uh, or chunk chunking down lazy imports. Basically lazy imports is basically nothing, but not bundling the whole application into a single bundle, but bundling, you know, it chops down the, uh, bundle into as small and as many pieces as possible and will serve on

Describe your approach to monitoring and improving the performance of your application in production.