Mayuri Birle

By giving a brief introduction of yourself. Okay. So I'm Mayuri Bele. Uh, currently, I'm working in as a software engineer. Uh, my current tech toolkit consists of technologies like, um, Mounds Check, uh, in which I have majorly worked as a front end developer and using React and Next. Js as a service for server side branding. Also, I have experience in dev up tools like AWS and GCP along with the, um, x along with the expertise in serverless functions like Lambda functions and, uh, GCP Cloud functions. Also have worked with the third party APIs like Elasticsearch and Google BigQuery on the and with the databases, MongoDB and SQL. Uh, yeah. That's it.

How do you ensure that your React app is SEO friendly, especially with the client side rendering? Okay. Okay. To ensure that my React app is Is SEO friendly now? Okay. So, um, to make, um, React App SEO friendly special, especially with the client side rendering, is is a bit tricky, but, yes, we can use a framework like Next. Js, which is generally used as a server side rendering. It is a popular framework, um, with the help of which we can assure the SEO of, uh, we can significantly improve the SEO by providing pre rendered content for search engines. We can also use SSR for specific, uh, pages where SEO is critical. We can use a React Helmet for a dynamic metadata. React Helmet is a library that helps you to manage changes to the document head, allowing you to set the dynamic metadicks. Optimizing for page speed, we can improve the page speed by fast loading time by implementing lazy loading and by implementing, uh, aesthetic, um, aesthetic, um, content like images and critical resources, many find the CSS and JS. We can create a XML site map like this only. We can, uh, um, ensure that our React app is SEO friendly.

In React detail, how would you implement a feature that requires a sibling components to communicate? Communicate. Okay. Okay. In React, the sibling components can communicate through their shared parent component. Um, there are a few ways to enable communication between sibling components. First is, uh, the lifting state up to the parent component means, um, allowing sibling component to communicate by setting up to their common parent. The parent component manages the street and passes it down to the children as a props along with the callback functions for modifying that street. Okay. Uh, second, uh, we can we can do it by using a React Context API. If the siblings are deep in the componentry and sharing data through the multiple parent child components becomes headache, then you can use a React Context API context allows the state to be shared globally across components, okay, without passing props manually at each level. Uh, 3rd is we can use, um, 3rd, we can use event, uh, emitters. Uh, means you can use a event emitter like, uh, libraries like a pops up to trigger events in a one component and listen to them and others. This can work well, uh, when the component hierarchy is complex. Okay? So like this, you can, uh, implement a feature that requires sibling components.

Can you detail a scenario in which you would opt to for a fragment instead of for the in a React? Okay. Uh, sure. In React, you would opt for a fragment, uh, instead of wrapping elements like div in this scenario, where you need to return multiple elements without adding extra nodes to the DOM. Okay. Um, using a fragment will avoid adding extra nodes to the DOM. Avoiding unnecessary DOM elements and wrapping the multiple elements inside a div or another HTML adds extra layer to the DOM, which can affect the layout and the overall performance. So in that case, uh, you can use of a react fragment, which is nothing but a empty HTML tag, which which will, uh, not increase the size of your DOM also and also is not going to affect the overall performance. And you can easily return its nested elements with the help of that fragment.

Okay. How do I, um, optimize or react performance by reducing the number of it'll be renders. One is the lazy loading. As I told, we can use off a lazy loading with our dynamic, uh, dynamic keywords in text and suspense as a callback. We can use off for memoization functions, like use memo and use callback. Use memo memoizes the results of the expensive computation, and only recomputes when its dependency already changes. Also, in the use callback, use callbacks calls the functions only when the, uh, calls the functions and prevents its regression only. When its dependency gets changes, it is useful when we are passing the functions as a props to the child component. Another, we can use, um, uh, pure components. And, uh, like this, we can optimize the reactor performance by reducing the number of free renders.

When should you use a class component over a functional component in React considering life cycle methods and state management? Okay. Uh, we should use a class component over a functional component in React only for maintaining the legacy code of our projects because nowadays, functional components are provided with a, um, stateful, uh, stateful classes. Uh, earlier, it was when the React was introduced. The class components were the only components, which are the stateful components, and the functional components on the other hand were the statelets component at that moment. But afterwards, with the newer versions of the React, functional components were introduced with the stateful components. And, um, no people no longer uses a class components as they are complex to manage, and they are just provided with a limited number of life cycle methods. Whereas in the functional component, you can, um, make a custom hooks, and you can use custom libraries to manage the street all over the React applications with the help of those, uh, custom hooks. You can manage the states. Those hooks are like, uh, use state, useEffect, useEffect and useCallbacks. Um, in class component earlier, it was, um, it was difficult to manage the complex life cycle methods, while, uh, with the help of a useEffect, it can replace most of the life cycle methods. So, um, yes, only in the legacy code, I would suggest you should use a class component.

Reviewing the following CSS and explain why the elements with the box class may not look identical across different web browsers. Show the consistent styling. Okay. Uh, so you have made, um, a box class. You have added a attribute box sizing as the content box, uh, which is, uh, not appropriate. If, um, I guess, uh, it doesn't look it isn't going to work on a different web browsers. I would suggest you should use a media query instead of this and to fix it so that it can work on a different web browsers.

Given this JavaScript code block, identify the potential issue when trying to alert the name. Could you briefly explain why this happened? New person, delete person dot name. Okay. Okay. Um, the potential issue is that person dot name will going to return undefined because we have created a new object with a function person. And, uh, in that, we have, um, in that object, we have assigned with the 2 keys, name and age. Since we have deleted the key name from the person object, it will, uh, going to return undefined, and it will going to alert undefined on with the person dot name. Uh, this is happening because, uh, we have deleted the, uh, key name from the person object. And, uh, this is the error for it.

What are the steps to follow? What are the steps to follow to migrate a React application from class component to functional component using hooks? Okay. Migrating a React application from a class component to functional component using hooks involve basically involves reflecting the code to replace the class bridge structure with a function based structure, which is, um, quite difficult, but we can do it step by step. Firstly, we can identify the class components which needs to be migrate, Okay. By, uh, identifying the class components in the complete React application, we can prioritize the simple components for initial migration. The components which doesn't have much life cycle methods or which have a simple logic. Okay. So, um, by, uh, ensuring these things firstly, ensuring these things, we will identify the class components from migrate to, uh, functional component, then we will going to convert the class component to the functional component. We're going to replace the class component with the functional component like, um, removing the render method and, uh, moving all the JSS directly into the return statement of the functions. Okay? Thirdly, we will going to handle state with the use states and the changes with the useEffect hook with the help of useEffect hook by removing the life cycle methods. Okay. Um, then, uh, yeah, as I said, life cycle method should be replaced with the useEffect. Okay. Lastly, we can handle, uh, means we can handle all the life cycle methods with the, uh, that. Then we can handle other life cycle methods like should component update or something like this with the hooks like use memo and use callbacks. Then we can reflect the class methods to the regular functions, and we can for references, we can use useRef. And like this, we can, uh, in the end, we can test and refract our complete code. And we can migrate it to from a class component to the functional component using the hooks.

What patterns or technique what patterns or techniques do you apply to ensure React components are reusable across projects? Okay. We can use our props for the flexibility. We can use a children prop for the composition. We can use of, uh, default props for the flexibility. We can use of, uh, TypeScripts for the propagation. We can use of, uh, use callback. We can use of a conditional rendering. We can use of a higher order function or a higher order components, which can be reused. We can use of a render props like this. I guess we can ensure that React components are reusable across

How do you configure Webex for a React project? How do you configure Webex for a React project to ensure an efficient build process? Okay. Configuring the the configuring a Webpack for a React project. Um, what we can do is uh, there are several methods to configuring a a a React project using a webpack by initializing