Namit Dhupar

I have around 5 plus years experience as a front end developer. So This opportunity really excites me to join this organization. And, Yeah. So currently, we're in a company called Meski. So it's a ecommerce based startup based in Gurgaon. So we basically deal with healthy products. So currently, I'm in charge of the front end part. Like, I'm the senior founder developer in this organization, and I'm leading group of, like, 4, uh, people out of which I think 1 one is in. Uh, currently, I'm looking for a change because, There has been some work related issues and also some cost cutting going on. So just to be on the safe side, I am looking for a change.

So in order to get the life cycle method, I would use so if you're talking about the class based component in the in React. So class based component are basically the What exactly are react life cycle method? So I would say component did not. And, uh, if there is any on change or something, We can have that on the change method, like any, uh, event based trigger, like click, blur. We can make an API call. So component did mount along with component did update, we can have a props change. And if those props change, we can detect if there is any change in the prop or the state. And based on any of that, we will try to call up call an API, restful API. Uh, in case of the functional components, I would use, like, which I have been using most of the time. I would use, uh, um, use effect on the life cycle, the, uh, the use of that hook. And, uh, with Use of that hook. There is a dependency area. So I want an and, uh, if I want the specifically, if you have to be called on the mount of a specific component, then I'll do a mount. Like, uh, I'll I'll leave a array dependency as an empty array. If I want an API call to happen, if there is change in certain data, like, there is change in some certain area structure or object, then I would have that variable inside the dependency area. And, Yeah. So mostly, I have been using Axios for the restful fetch, but this can also be done using the fetch API. And, uh, asynchronicity is obviously the best way. Uh, in order to have an optimal way to approach for a restful API call, say there are multiple API calls in which we need to deal with, then I will use, uh, the promise dot all method, which will ensure that All those APIs are getting called parallel without affecting the page's performance. So that's how we can leverage react life cycle, in order to call any restful API. If we talk about Axios specifically, I would like to go into more more details. So Axios is basically a package which makes the fetch API much more robust. As in we can configure the endpoints, we can have a specific base where a auth token everywhere in a single file with a conflict file, and we can use that access instance in multiple other files based on the requirement of the API to be called. So that's how we I have been doing in my existing projects. So yeah. Uh, useEffect, call our API, async of it. We don't usually do async of it inside of useEffect because, uh, it's not a good practice. So instead, we would have a separate function call for an API to be called, and then I can use that function call inside the useEffect hook, uh, instead of using the use effect, async and then the curly braces, like the the the the round place round brackets and then call them calling the calling the API. So, yeah, async of it, Axios, use effect, combine it more, combine it later. So that's the basic

So basic flow of data in the rear component for Redux is when we are, uh, trying to install the Redux since Redux is basically your global state management. And this will be used in the in in making sure that you don't lose a state if you if a specific component is unmounted. So say in case of a cart, we need a cart to you know, in my case, if I'm working on an ecommerce project with React, then I would make sure that adding an item to the cart and triggering a response and making the cart amount as, you know, length of the array inside the inside the the cart items specifically doesn't closes or doesn't affect the cart items. So I would rather have that stored in the Redux, or there are other better better ways, easier ways to use Redux. Sorry, global state management, like the stand and context API, this inbuilt way of using React, uh, in in building using the global state component. But, yeah, if you say about Redux, then it is sort of an architecture. So this architecture will contain a certain amount of, uh, I would say, components that we need to deal with, the inbuilt components, the inbuilt section. So it basically consists of an action, subscription, a middleware if required, and the middleware will go in stack. So action dispatcher, it will first the the other component will call the action dispatcher. That action dispatcher will send to subscriber. And from the subscriber, that action will go to the Redux store. And the Redux store will contains all the data, which is present in the which is actually the go global store. And there, it will send this to like, the reducer will, uh, will catch the the act the action item, and then we can use that as a in our component. So to subscribe that, we can use the maps data drops method, uh, to send a specific to us props and map it to a state and then get us change changed state. So this in order to render render in order to trigger certain re renders if we change the Redux store. So action dispatcher, reducer, uh, middleware middleware is used if we are trying to access the reducer using any side effect or, say, any async API call or any side effect based based calls, and we want that to be dealt inside the Redux itself. So Redux Redux model where it can be like Redux, the Razor Redux Saga. And, uh, yeah. So that's the basic gist of it. Yeah. That's how a component can subscribe to Redux store. Uh, if I don't want internal sorry. I just heard. Uh, internal API. So, yeah, that would require the Redux and Redux saga. I don't know the specifics right now, but, yeah, I think Redux Thunk is a version of Redux server, where will get your job done if you're trying to access a middleware using just for

Elaborate on how would how complex Redux action creators that is not dispatched. Sure. Yeah. That is not dispatch you. I show this. Okay. So there is certain certain tool in our Chrome or any other web browser would, uh, recognize web browsers. It's called as Redux Toolkit. And using this Redux Toolkit, We can, uh, so there is Redux component inspector as well where we are able to get all the trees in a state, All the the structure for Redux Redux store in a straight format, we can action We can use that toolkit to trigger certain actions. Uh, and The events we are events we see once we connect any component to the Redux part itself, then we will use that inspector to check check if that particular action has been called or not. So that action call is also triggered when we are using that toolkit. So yeah.

Your phones and direct insurance. We're showing that state efficient. So personal in a personal experience, I have been mostly working with, uh, Redux. Uh, sorry. Not Redux, uh, but Krishna. Not with Redux, but with the. So, using formic state formic forms. I have been working in my previous organization, and I have built I have basically used it a in a great deal. Currently, you're using forms, uh, in a then in a normal old fashioned state to props format. And, uh, in the separate projects, we have implemented, uh, React Hook phones. So in that way, we are using React phones. The most efficient way I feel is actually, uh, Formic because I have I personally have experience with Formic, and the it contains its own validated functions. We can have our own, uh, regex methods if we keep them in it. On validate functions, on blur functions. The the Formic React has its own field set set of fields, which we can configure it our in our own data, in our own in our own core project based on the requirements, which is very configurable. So FormMaker is a better way. Forms. I am sure it is good, but I haven't I wasn't able to use it in that big of a deal, uh, in that great capacity. Maria. So, uh, we can have a certain initial level validations using format, validate a function, onboard function. Then we can create our own custom validations using the only method. And the forms can be on submit form, then we can create a specific payload. And based on the payload, we can send that from data to either, uh, the API itself, or we can track it in a Redux like state management if we are dealing with a multistep form, which I have actually used in my previous work experience.

We're dynamically loading via conference based on user interaction such as clicking a button. Okay. So in order to do that, the dynamic leave loading function. So dynamic load is something which I Think that is the specific dynamic import, like lazy lazy, uh, lazy import. Uh, I thing, but I don't think so that we are asking about the lazy part. So I would say that in order to trigger a certain component on click of a button, on any use event, we can actually bind that action state to the specific event. So, say, we have clicked on a specific button, and we want that button to change the state, And we can send that state to the set external component, and it can detect that chain in the state and render the component based on the current value of the state. So say we have a button, and we want a specific model to pop up when we are trying to click on the button. Now what we'll do is we have we have a separate model file. Okay. And that model file, which we can call on in the in the component itself containing that action state. So we can have a condition where if if a state is false, then we don't need the the the the the the model to pop up. Otherwise, we can just use the state. We can just, uh, trigger toggle the state state value to true. On the click of the button, we can bind that action, And we can use that mining action to the state change. And on doing that, and when we do that, we can have that Specific render to trigger and then and done, we will see the model. And if you want to close it, you can again bind the on close method and trigger the state falls, and this will dismount the component. So that's how we will be able to dynamically load a React component. If you talk about, uh, non event based triggers, then I would say that it's better that, Uh, we would have a certain lazy loading component, which once all method, we will load it dynamically. So there's a certain dynamic Import module. So that's how we can do it. I mean, I have I would have to explain both the

I'm sorry for the voices, actually. There's some fusion classes going on in the other room. So so, I think that this is basically happening because, uh, we are trying to access a variable before it is getting declared. So That is why. So this is basically happening because of, Hoisting issues. So let is, uh, as you as you know, it's a functional scope variable, and you're trying to access the let before we are even declare defining it. So this is where a reference error will come because of late. And, As the hoisting because of the principle of hoisting, it is not able to actually get the variable before we are defining. So if we use let user if we define a let user before we do a fetch call, then I think it will

So if I want to take a guarantee of React component across different browsers and devices. So we can use certain tools. Like, if you're talking about the best security, I am not sure. But if you're talking about the best responsiveness, Sure. I would make use of grid system. I would make use of various CSS properties like, Like, the grid media queries. If we're using any external external, Uh, package, CSS package, like tailwind or material UI or Tailwind Material UI or, uh, Bootstrap, then we can use that. Otherwise, we can use different devices. We can use so if you're talking about different devices, You can use something called the Google Inspector. So Google Inspector will make sure that that your component is It's responsive. It is able to work properly on different different devices. We can configure all those devices based on different operating systems. Uh, we can use something called a very good third party application called BrowserStack, which most of my testers are doing in my current organizations. So that is how they are or they are they're verifying the functionality of each and everything in browser stack. Then there is also Lambda testing, which is something similar, but it's not that great in my personal experience. If I talk about different browsers, then sure. We have to make sure that we are using e s 6 in the capacity where, uh, it is able to easily be be, uh, consumed by by different browsers, or we can use certain browser specific, browser specific JavaScript functions, which can cause different behavior based on different different browsers. So Webpack, Mozilla Webpack Safari. So we will do testing on different devices on BrowserStack. If we found any kind of in of discrepancy. We'll certainly try to figure out a webpack solution for that also in CSS. So Yeah. This is how we can devices, browser stack, or your own, uh, local host. We can also if you're talking about real devices, we can configure local host using IP config and try to access the local host on our own on our own personal device if you don't want to use any virtual device. So, yeah, I think that's how We can handle different devices and browsers using JavaScript, CSS, and India, and guaranteed guaranteed functioning Functionality is working properly across different different platforms.

I'm sorry. I haven't actually worked with the portal. Um, no. I would like to proceed to the next question.

So in order to secure a react application from common web vulnerabilities, so the different approaches that I'll follow is, uh, first of all, I would suggest that we use, uh, HTTPS methods instead of HTTP, which would ensure certain authentication security and in order to prevent SQL injection or DDoS attacks, we can configure proper ways to to handle the multiple request. So, say, you have a specific form and you need to log in. And you need to have a certain check on your system from the back end and the front end. So for front end part, I wouldn't request an API to be called on multiple button press. I would rather wait for a specific API to be called once. And if the based on the response, if the user has certain count remaining, then only we can allow the user to access the API. Otherwise, we won't. So in a so this would pro so this would pro prevent the the DDoS attacks, the the packets filing the on another application. An insecurity point of view, we can certainly use better ways to write JavaScript. We can minify the JavaScript so that our source code isn't so easily identified and compromised. And, yeah, I think there are a lot of things already getting handled with the recent version of React, which we are using. So 18 the 18 is very good has a very good inbuilt security mechanism. And, uh, yeah, that's about it. Also, yeah, we would, of course, have a specific kind of authentication implemented like pass auth or OTP based something so that the user isn't able to compromise someone's account, and we would make special event based bindings. Don't call the API so often that it would actually crash the servers. So the binding of events will have certain security considerations before you were implementing it, certain countermeasures to prevent them from being triggering multiple time trigger multiple API calls at a time. So yeah. So these are some common vulnerabilities that can be avoided if we use React. And in terms of security, we can certainly use some expiring cookies. Say, we can store the 10 cookies if we it's a very spec very vulnerable data or local storage, we can clear it out from you know, once we are logged out, we can clear out the local storage we need to clear out. There are certain steps that we can use to optimize to have an optimal and more secure, uh, way to establish Adiad components and, yeah, so that's about

Um, I haven't gotten the opportunity to do any kind of sort of unit testing in my organization. Normal organizations, actually, because I have never been a part of a very good, well established organization, and I did try to convince the management to let us implement those those functionalities. But, unfortunately, I wasn't given the The required bandwidth or even time to actually get into it. So I would rather have to skip this question. Thank you.