Himanshu Suryawanshi

My name is Himanshu. I have approximately 4.0 years of experience in front-end web applications. So, till now, I have worked in the travel and hospitality domain, and currently, I'm working in the finance domain, specifically in the insurance domain. So, in the travel and hospitality domain, we worked on the food dashboard. So, in that food dashboard, it's actually a food application where the store manager gets the orders. The store manager will get the orders. And, yes, the orders have many different statuses like order received, order assigned to any particular driver, order is delivered, order is ready for dispatch. These are the statuses we have in our food dashboard application. We also have an admin module there. So, where the store manager is concerned, we have defined two user roles. The first one is the admin user, and the second one is the store manager. Whoever is the admin can view all the orders received in a particular day. The store manager cannot view the admin module because it is restricted to that panel view. We have the JWT token there. I was responsible for implementing the JWT, and I was responsible for managing the status of the orders received. So, that's all about the food dashboard. Currently, I'm working in the insurance domain. We're based on the user, based on the user input values, we are suggesting them the best insurance policies that are suitable for them. So, I have created the forms. I've created the models for a better user experience, and I was responsible for implementing the validation part. Like, for whatever data we are submitting to the backend, that must be accurate and correct. I implemented the validation part. I worked on the tooltips, created the tooltips models of the web application. And, yes, based on the user input values, we are suggesting them the best suitable options available for them. So, that's all about the insurance domain. In my leisure time, I like to play chess.

Yeah, so while calling an API, we can use the try and catch block to handle the error, whatever we are getting it from the service. Let's say one of our services fails, so we can use the try and catch block to handle the error. That's the first thing. And second, what we can do is use the window.onerror function, which is provided by JavaScript. That also we can use to handle errors globally in our web application. So that's the second way which we can handle errors while calling the API. Or we can use the try and catch block. We can use these two things to catch the errors. The try and catch block. If the API succeeds, then this piece of code should run. And if there is an error, that will be written inside the catch block. So that's how we can handle errors.

I would take the React Context API to implement theme switching in a direct application. So, while theme switching, we can use the Context API there. So, basically, the Context API is a hook which it's basically a way to share data between components without passing props down manually. So, using the Context API, we can easily switch the theme from let's say we wanted to switch it to the dark to bright to dark. In that way, we can use it and type theme we can pass it to all the children.

Here is the custom move and when should that be used? Okay. So, custom hook is nothing, but it's just simple hooks which have the prefix of use, and then we can perform any functions whatever we want it to do. Let's say I wanted to find an API and that data should be stored somewhere and that should be displayed. So, how can we use it? We can use the custom hook there. Let's say, when we use a custom hook first, we'll be using the useState to store the data we're getting from the API, and then we'll be using the useEffect. So, in both these two functions, both these two hooks, we can use it in a single hook, which we're creating as a custom hook. That's how we can use it and mention what we use. Okay. So, one more example we have. Let's say we wanted to display the time. We wanted to display the current time. So, there also we can create a custom hook. Like, reusable functions we can create. So, we don't have to use the useState or useEffect again and again. We can simply use it. We can simply make a custom hook and then we can directly access the time. We can directly get the time. That's the second time. And, yeah, that's all.

I explained the concept of lifting state up. Okay. So, lifting state up is like passing data from a parent to child component in a React application. That is the normal flow. Right? When we want to pass data from a child to parent component, that process is called lifting state up. So, how can we do it in the parent component? We can create a function there and define all the functionality inside the parent component. And we can call it in the child component, passing it as a prop. So, that's how we can lift the state up, like, from the child to parent component. We define a function in the parent component, and we pass it as a prop to the child component. And in the child component, we can create a button and call this function. The function we have defined in the parent component. So, that's how we can perform state up and achieve component communication. Okay. So, the main advantage of this is, when we want to update the state of a parent component, we can update it from the child component.

How do you integrate Redux model where into a React application, and what is the significance? Okay, so Redux is basically for managing the state of our application. So we can also use the context provider, but when we are having a small application, then it's only applicable. Not applicable simply. Like, it depends on the application size. So let's say we are having a large number of states and a large application. So there, we can use Redux to manage the state of our application globally. So, the Redux process involves creating a store, which has three main components: the store, action, and provider. All of our data is stored inside a single store. And if we are using Redux, then it must have a single store. We cannot have multiple stores. Let's say we wanted to update any state. So how we can update it? We can pass it to the action. Yeah. Results. Action. The action is dispatched to the store. The store then passes the action to the reducer function. The action must be passed to the reducer function, and then the reducer will update the store. And we can easily manage the state if we are using Redux. And the Redux is pretty much a predictable state container. Like, we can predict the response if we are using Redux.

Explain please explain what issue you might encounter with the function sexposed and the react component using that amount before the asynchronous call is completed and how will you prevent it. Okay. We have the function which is called the text post. We are calling in fetch API post, start and response, respond on JSON, run and post. This start set statement on post. Okay. So the first thing here is the async keyword is needed because, an arrow function, it will always return the undefined. So we are not, so the post will be getting undefined because, arrow function won't work inside async keyword. So this is the main problem which we'll be getting. And, fetch API post, we can, set state, we are setting it check state inside for the post. So instead of this, we can just write it, and we can just, change it to post, that's how we can do this.

By examining the following reader section, we return and can identify the missing piece that we could do following in this pattern and latest purpose. Also, explain any potential drawback of using this button without any. So there we have the function of the user. We are passing it user ID and user data as an app, and we are returning the type. With the updated user start and the payload. So, here we have the action data. Function when I use the data, it returns the name, type, copy load. The statement will typically come in the form of a switch statement, it returns the type and the payload.

What is the significance of server side rendering with React and when should we use? Okay. So the server side rendering is oh, sorry. Server side rendering is the code is all so whenever any, application from, it will create a DOM inside the client side, and we are doing it as server side. So that DOM so that Dom will be, creating it in server side, and only the HTML file will be sending to the client side. What is the significance of rendering with React? So it increases the performance and, it increases the performance of our app web application.

You can use the back to finance the assets and dependencies of a React project, so that tag is like it is a compile.

Compare the use of inline style versus CSS modules. So, inline style will have the highest priority. So let's say we are, for instance, we have one developer and we are writing it as an inline styling. That inline style will have the highest priority. Let's say we have written it as another CSS file also, but that will have the second priority. So inline styling has the highest priority.