Swetha Dhandu

Could you help me understand more about your background by giving a brief introduction of yourself? Hi, team. I have 4.7 years of, uh, experience in, uh, your development using Yeah. Apprenders tag like React, JavaScript, HTML, CSS, Redux, and had a great experience in writing in test cases using Jell's time to the effecting library. And I pursued my graduation from JND College of Engineering with on to CDPA, and that was, um, a college topper in intermediate with 97.5% and, uh, starting my career with DCS, uh, in June 2019. Later, I had joined in EPAM systems in March 2022.

What steps do you follow to refactor your large component into smaller, more manageable components in React? Yeah. Can repatter larger component larger, uh, application larger components into smaller by, uh, following A clean code methodology. In clean code, what we can say is, like, it should, uh, should not have more Then a 200 length of coal per component. And we can follow solid principles also, uh, to maintain large components into small components Like, for refactoring, what it will say is, uh, we have to we have to write a component or function With the single responsibility means, uh, if you are adding a function, its action should be, like, Uh, depends on only 1 responsibility. The the function should do only 1 responsibility. Uh, like, the function should do only 1 action like that. Um, like that, if we divide, uh, the code into small small functions And, um, we can try a component with the useful functions which are really useful in that component. Or else, we can write some helper components which, uh, if we need, uh, complex JS, like, Uh, functionalities, we can write a helper, uh, helper files, and we can import them into, uh, into our component. Like, it also can, Um, like, uh, divide the larger components into smaller ones. And, Um, in solid principles, we can use, um, interface aggregation and, uh, dependency inversion. Those principles we can use for refactoring, uh, large components into small components. Based on that, um, without, uh, without, uh, without, uh, like, affecting the, uh, code logic and, um, Can improve, uh, the React application performance also by refactoring

Your approach to creating a controlled form in React that handles both validation and submission. Yeah. In React, uh, we can control forms by having, like, Uh, handlers. Yeah. Handlers in, uh, form. Actually, um, we have some events like, um, which will, uh, which will act by default. For example, in form, we can see submit action. Uh, it will takes place on default. We can prevent that by using, uh, synthetic event like prevent default Prevent default. We by using that, we can prevent the default submission of the form. And we can con we can take that control of submission in, um, user defined, uh, like, uh, handler. For example, on, uh, on submit of form, whatever What I want what I'm going to do. That 1, I can define, um, by writing a submit handler and assign that submit handler to on submit drop into the form. So that I can control the submission of the, uh, React form. And validation, what we can do is for every, Input what we are going to take from the form, we can validate by using, uh, handlers. For example, uh, I'm taking 1 input and, uh, I'm expecting email ID from the user through that input. Um, for that, what I have to do is, um, how to write a on change Email handler for that input and in that handler, I have to mention all the, uh, validation, uh, rules like, Uh, what should be email ID contains, what should not, and how the format will be, and how the regular type of that one. That everything I have to, um, specify in that, uh, event handler of on change for, uh, input event. And, And if there is anything missing from the, uh, rules and we again, uh, we can specify as a error, Um, like, um, if if the email ID is not matching the, again, requirements, we can specify that in the error. And, uh, we can update that error state and we can show that in the, uh, UI. Like that, you can handle the forms

You choose to use Redux Tank or Redux Saga for asynchronous actions in a Redux application. Uh, Redux tongue is used mainly for the complex React applications and where we want to integrate, um, like, where we want to, uh, use the middleware for React and Redux to integrate, uh, React and Redux, we need a middleware whenever we need that, we'll go with Redux. Actually, had a good experience with React, and I didn't get a chance to work with React Redux Saga. Uh, in Redux, it allows allows developers to write nested actions inside the action files and, um, integrate them on pass them pass that actions into the reducers to, uh, update the, uh, Redux store based on the actions and they are dispatched through the users, uh, so that we can use Redux

What approach do you take to ensure API calls are made efficiently in React application avoiding unnecessary network requests. We can take, uh, like, uh, to, uh, make APA calls, we will use promises, uh, to call them up efficiently, um, like, um, instead of using a sync or wait, uh, promises will be more, um, what we can say, insights. Uh, Prometheus can give more insights into the React application, uh, for making API calls. And, um, with the, uh, necessary network requests to, um, avoid unnecessary network requests. What we can do is, like, um, along with HTML, like, a request body, uh, like, inside body, we have to, um, mention the payload and all for, uh, making AP calls. Uh, actually, we use it to call APIs, uh, using access library. We can also use.

How do you set up unit testing for React application? What libraries would you use? Yeah. Um, to write unit test case for React application, uh, we have to we can use, um, uh, just an engine or react testing library. Also, we can use. We have to install that react testing library. Uh, or else, uh, how to install it just an engine. Um, then, uh, inside just, uh, we have amount, um, render and swallow like that. Three functions are there. We're using that 3 types. We can, uh, write in test cases. Shallow is for, uh, the actual component only. We can we cannot dig deep into the child components, uh, for writing unit test case. If you want to dig deep into the components and render the props also, um, for writing unit test cases, we have to use, um, mount render is also for the rendered part only. It cannot access the, uh, just functions like, uh, out of the rendering part. Uh, it will to test, uh, right in the test case for rendering part alone, we can use render, uh, methods from

Following react to codes, not update the state correctly. When increment count is called common security. In a short time, I'll explain how this might lead to unexpected results and propose a solution. Start at commenter. Comment. Commenter. Time. Time. Actually, I have I have a colleague with functional components only. In my experience, I didn't get a chance to work with glass components. They start to state, not counter and updating state using this. I I'm not, uh, clear, like, like, how to check and what is there that here it is. If it is a functional component, I'll definitely solve it. Sorry about that.

Even this time script snippet is in react or this and the potential pitfalls and provide information. Interface name, string, age number, Uh, send out me a person Okay. Here, we take an interface, Type person and having 2 parameters, name and age. And we are, uh, calling on display person method of type. Display personal. Okay. And having a proper person of type, uh, person interface, that is fine. Here we are taking 1 person constant and here we didn't, uh, mention any type of that person and, Um, it will throw error to calls this constant. For this constant, we didn't, And define any type, and inside that, we have some variables, properties like name, age, email. For them also, we didn't, um, uh, define any type. If we define this person of Type person interface, then also it will throw error because the person interface having name and age properties only. And the person object is having name, age, email. Uh, to solve this, we have to add email property to the person interface and, Uh, assign that person type to the given object person or else we can take we can, To override the person interface with email object, uh, email parameter, and then, uh, we can assign the person, Uh, interface, uh, uh, as a type of as a type to the person object.

All considerations they take into account when implementing a scalable Redux architecture. K. By implementing, uh, Redux architecture, uh, we have to check whether, Uh, the given application really need Redux or not because when we are going to Redux means the React application have complex state data to manage. And only we have to go with the Redux RS. We can use the context, uh, API or simple, um, simple manage state management. Um, then, uh, for expanding. Right? Scalability. Um, we have, uh, in Redux, we must have reducers, action creators, and store, uh, which is created by using create store. In red users, uh, we we are going to use, Uh, state and actions. And in actions, we have type and payload. Uh, to maintain the Redux store as Scalable, we should have, um, uh, readability. Like, uh, we should have each and everything as, Uh, separate files for reducers, separate files for actions, separate files and for store separate files. And, While, um, each and each and every action should be defined clearly with its type and payload and each Reducer should be defined with each, um, uh, state and action. Then we can combine all those redusers using commanded users and send that to

Can you explain the benefits of server side rendering React applications and its impact on SEO? Yeah. Uh, server side rendering in React applications in the sense, 1st initial rendering of the application takes place in the server side, then It returns HTML into, uh, view layer for display purpose. That is server side rendering. Yeah. And we actually, we use it to do this server Training by using, uh, next dot JS, our gas by, uh, the type of frameworks we can use in React Applications to, uh, to allow server side rendering. Uh, what it will do is it will improve the search engine optimization and performance of application, um, as we have the as we are, Uh, rendering the application initial on the server side. It leads to search engine optimization and pop increases the performance of the application