Ankit G

Okay. So my name is Ankit. I I started my career with freelancing 6 years ago. For 2 years, I did freelancing, then I moved to, um, consultant job in Flipkart. After that, I switched to a start up called Pyxis, which is a martech company, and I was working there as senior software engineer. After that, I switched back to my parent com uh, main company, Flipkart. Previous company, I mean. And this time, Flipkart had me as a full time employee, and it was same team, everything same, and then I'm doing contract here. So that's mostly it. And then I have experience from startup to freelancing to full time. All.

Could you implement a method for implementing that and requiring interaction in the browser's local storage? So in order to interact with the browser's local storage, that method should be implemented inside our callback API. So first, uh, call and make a use callback and react component. Then in that component, try to access the, uh, local storage as you want, and this should be it. And in order to get the data from local storage at the time of rendering, you just make a useEffect component. And on the mount or maybe if some dependency, um, is there, then maybe add that dependency to user spec, and then just fetch the data from local storage. That should be mostly like it. Use effect to get the data at the time of render, or maybe use callback to change the data from in the local storage or maybe get the data from the local storage also on user actions.

How do you handle the installation of 3rd party services such as payment gateway, social media APIs in a React application? So in a React application, we generally use the SDKs provided by these APIs or this API gateways at, uh, from this our application, we generally redirect the users back to user users to their, uh, gateways and stuff like that. Once those, uh, gateway are make the processing and everything on social media, well, we get our authorization code, and it is just more generally OAuth based mechanism, then we use that authorization code to get, uh, some access token, and we can use that access token from the back end generally to get the resources. So, um, generally, from the React application, we just redirect it to the gateway. We direct gives us the token authorization code. We use that code to validate the token on the back end side, and then we make a call to that uh, gateway. The idea from front end directly if that gateway provides some JS SDK or maybe from back end if they don't.

Single page application react using client side routing. So, generally, it's like at the mount point, you mount the router at the root container. Once router is mounted, you give it paths, and then all these paths have different different components depends upon. You can have a skeleton on that so that head, uh, etcetera, is shared in all of the components, and that should be mostly like it. You use some router, like maybe React router or maybe Remix router or something in React you can use. And those routers, based upon the history API, they get the URL, they render appropriate component, and that should be mostly it.

You explain your process of debugging a complex way that expands across JavaScript, HTML, and CSS? Um, okay. So in order to debug, if some error is coming, we go to console. If some memory issue or performance issue is coming, we go to profiler. And if some rendering issue or delay is coming, we go to react profiler or react component. So, basically, dev tools we have to use once we identify if the issue is with HTML not looking proper, we just inspect the, uh, code. If CSS is not looking proper, we just inspect the element and go check the CSS applied on their dev tools. But, generally, in order to debug a complex application in JavaScript, we use profiler. We can take snapshots of it to save the memory. You we use, uh, Lighthouse to get overall health of our website. We audit the website. And if any consular comes, we just add breakpoints to our code. And whenever, uh, we see wherever the code is breaking, we just add a breakpoint and just check what local environment, what kind of, uh, things are there and all stuff like that. So yeah.

How do you manage state in a React application? And can you mention a scenario where there might be a better chance than local state? Yeah. Definitely. So the state in React is generally local, and whenever you need any data that needs to be, uh, that needs to be preserved between the renders of a component, then we store them in React. And, uh, state and props are 2 similar things, but props comes from parent and the state is from within the component till the life of that component exist. And deducts, we generally use to share the state across our whole application. So suppose one component is using some state and another component also needs that state. Suppose maybe user data they would components need, then we will share them with, uh, Redux. And also Redux gives a very clean control over state, so it also gives us backtracking and things like that. So, yeah, mostly, this is why we'll use Redux.

Given the following JavaScript function, it's environment. I'm preferring large areas. It's a bit to optimize it. So in order, it is, uh, actually trying to, uh, loop over whole array, and then it is giving the sum. And when processing larger ends, it might it might not be performing well because it is, uh, complexity of o n, and then we are using the area operation over it. So that is, like, for each iteration we are calling it, maybe we can use for loop here with a simple sum counter if we can, and that is going to be the fastest way. If we cannot do that, then we can use math dot max with the spread operator. Math dot sum using a spread operator, but that is most likely going to be maybe less performant. But, yeah, these 2 are approaches, either use for loop or use matters on.

So here, uh, with legacy browsers, this grid layout might not function well. In that case, we can go back to Flexbox, and we can use Flexbox or maybe float left will work fine. But, otherwise, uh, if we cannot use grid, we will just go back to Flexbox and use that.

So to manage the usability and maintainability in our React component, which which is very big. We just try to identify the individual functionalities that we can extract from that component. Then we will just extract those functionalities and make a try to break the component into smaller ones. When those components are broken into smaller ones, then we will try to memoize it. We will try to lazy load the component using react.lazy, then we will memoize the computations inside. If, uh, still it does not work, we will have some other state. We will use context to share the state in this component so that the renders are minimized. And we if, uh, any component can be pure component, we should be using pure component there. So it is not a problem if a should component can control. Should component update can control things, then we should, uh, control the should component update thing, and that should be mostly it.

So in order to secure a React application, we just say we need to save, uh, our users from 3 things. 1, like, send it as the input so that our users don't get into, uh, typical SQL injection and those type of things don't happen. Once we have sanitized the input, then in order to process the save the user from x access attack, we just, you know, validate the input before showing up on user's input into another user's page, like blogs and all. And and in order to use the save our users from CSRF token, we need to CSRF attack, we need to provide some maybe a cookie with same site none or we can also give CSRF token protection.

Definitely. So first, implement code splitting implement code splitting in a React application either with the dynamic imports or React lazy, which will decrease the bundle size. After that, uh, try to have critical, uh, rendering part optimized and have as little CS at the table as possible at the start. Once we have those things sorted, uh, that should be it. Lazy loading, impact, memoize, and that's it.