Sanskar Gupta

Good. So I'm currently having 6.5 years of experience in front end development, and I'm currently associated with GetThere India. And here, my role is to, work on the front end, the Clitter task. And, I majorly worked on the React JS, during my experience, in my experience of 6.5 years. Here, I take the what I used to do is I take the cabins from the product managers, convert it into the technical stories, and, then, try to convert into technical screen. Try then try to assign it to the team, and then I take up the complex task and assign it to myself. And I use, I used to build up the usable component so that it can be reusable across our application and, using the I also work on the performance optimization techniques, which are used in the React. So I majorly work on the front end side. And also in this process, I, try to, develop the API contract, just being required by the back end team. so providing them back, the API contract is also a part of my role. So yeah. Yeah. That's it.

Okay. So coming to, this question of choosing a Redux or a contact CP. So, we were working on a very small project, there where we were, used to build our application where our courier or the people who wants to join GetIt, wants to, want to fill up a form. And then based on that, we want to take their response and proceed it for further. So in this scenario, we try to, since this is a very small application, which, don't deal with a lot of complex city and don't have so many models. So there, we try to use the, context API for state management, and in a place where we have multiple, components where the data of, the each of the company needs to be shared between them to do the processing. So they in those scenario, we try to you go for reduction. So based on these parameters, my decision improved based on the requirement, complexity, and the need of the project. it basically have, influenced my decision.

Can you explain how problem? Yeah. so prop drilling is a, is a problem where you when you have so many when you have a parent component and there are so many, child component, like, there is a parent component inside that, there is a child component, and there are n number of component below this, the child component. So in this scenario, what we can do is we can use context API. And using context API, we really don't have to manually, pass the drop through each component. Instead, we define a global context, and that global context can be utilized, like, we can wrap the component, across that, context, and then we can utilize that context throughout through all the, all the, components which are wrapped around it. So, yeah, through this, we can avoid using the state management libraries.

Okay. outline the steps for connecting the ad component to our Redux store. Okay. So k. So there are a few methods which we can use this. certainly, to achieve this, first, we install the reducts and the, React reducts, packages, and then we create a reduct store. And, then we define the root reducer and the reducers also. based on that, we have a stay, like, who called user, use selector through which connecting. Yeah. Uselector through which we can connect our component to a store. And that uselector, what it does is it give us the complete access of the store, which is in the Redux. So through, use selector, we can yeah. So through use selector, we can connect our component to the store. Earlier, we have earlier, we have a connect function, which was a higher order function. So, which accepts the maps to 2 props and map dispatch to props. So 2 parameters through which, we, used to connect the, store to our component. So, yeah. So these are the ways through which we can connect our, store.

Okay. How do you manage application state in a component hierarchy when not using Redux or a context API? Okay. Let me think of so managing the hierarchy without using, reduction, so we have a we can leave the state, of the component using use state hook. So use state is a hook which, through which we can manage the state of the component within its component. 2nd one would be the, through prop drilling, where we can pass the prop of, where we can pass the data from one component to another or other. also, we can pass the data from child to parent through callbacks, using properly. So, and also to manage the state, we can also use higher order component or render props. Through these techniques, I think, we can manage the application state, in a component hierarchy. So yeah.

Okay. strategy strategies do you use to optimize the rendering performance of a React application? Okay. Strategies. Okay. So we have perform for performance. Yep. So what we can do is, we can use React memo for functional component, which, like, it wrap the functional component with the react, dot memo to prevent the unnecessary render when the prop haven't changed. So this is one of the technique. Then we have, in the previous version of the app, we have should component update or pure component for, these are methods are for the class based component. These are the part of the life cycle method, and then we can, avoid using, inline functions. So, through which we can also optimize. And then we have, hooks such as use memo and use callback, which are used to memoize the expensive calculation and use memo. Use memo memoize the expensive calculation and use callback memoize the function. So the these are also the few methods. Then, we have something called code splitting. So React has React, lazy and suspend to load the component, and which introduces the initial load time. So through this also, we can optimize the performance. And then in case, we have a large set of data, where we are dealing with a large list of data, then we can, use virtualization in that scenario. So, yeah, these are the few strategies through which we can optimize the performance of the React application.

How do you ensure unit tests are comprehensive and maintainable for React component? Okay. Ensure unit test are comprehensive and okay. So we what we can use do is, we can use testing, framework or a library. It's like, test for testing. test is also there for testing, and the testing library is for rendering the component. then we can what we can do is we can write a clear and descriptive test. so when whenever we are writing the test cases, so what we can do is we can, write a proper description, to each and every, test suit, what it is trying to do. Then we can test the component behavior, not testing the implementation. So what it does is testing the component behavior, will help us in understanding whether we are, achieving what we are expected to, achieve. And then we can use, mocking and stubbing of, APIs so that, we can test, whether the whatever we expect from the API, we think, we can test the external dependency, and we can isolate the API and, so that we test the API thoroughly or the response we are expecting from that function. Then, there are discovery tools, through which we can check the coverage, like, whatever the test cases we have written. It is discovering all the code which we have written. then I think, yeah, these are the few things which I can, through which we can ensure we are writing a comprehensive and maintainable, test case for the real components.

Discuss a matter of implementing theme switching in React, and what, libraries or tool would you use? Okay. implementing the themes. So okay. More Teams. So in so for team implementation, we have, react context API, for managing the state globally. So what we can do is we define the context globally, the theme context, and then, or we can, based, we can use the style component for applying the style based on the, current team. So then what we can do is we can create the, create the team and provide the team data and a function which, toggle the theme. So through this thing, we can implement the theme context. And yeah. So yeah.

What are key consideration when implementing server side rendering for a React application. Server side rendering. SSL next. Yes. Okay. So server side rendering has its own benefit. Like, when a normal React application, when we work on a React application, we the React application are generally not SEO friendly. so there is a popular framework, which simplifies the server side rendering for React application known as, the React JS. So we can do, the framework choice. So and then what we can do is, the, what it help us is the initial it helped in initial data fetching. So it fetched the data on the server side before rendering the component, which ensure that the data fetching logic is consistent between the server and avoid discrepancies. And, Yeah. So apart from this, yeah, it, basically, when we develop application on, implementing a server side rendering, then we ensure that the metadata such as title description is rendered on the server of, is rendered on the server for SEO benefit, and we use library, like, create help me to manage the metadata. And then we have, we can what you can do is we can use code splitting. So splitting your code to reduce the initial load time, like, we can use tools like Webpack or Wershell, and we can use dynamic import. So we ensure that the code splitting works in seamlessly with, server side rendering to avoid any issue. then what we can do is we can implement caching. so we implement the caching strategies to improve the performance and reduce the server load. And we use a stupid caching header and server side caching solution, like Redis. So, yeah, I think, these will be my key consideration when I'm implementing the server side rendering in our React application.

how do you approach implementing custom hooks in a React application for obstructing and reusing logic. So, yeah, we can, so what we can do is custom hooks. So, let's suppose we have a component where we have written a boost effect, which calls the API call. And, we, store that response into our internal state of that component. So we can extract this functionality into our custom home and which and that custom hooks will only deals with the logic of fetching the data from the network and then, return the return the response, directly. So if we do this, instead of writing the same logic again and again in all the different company, we will be obstructing, that logic, in into the, hook of in into our custom hook. And then we can, we can reuse this logic at multiple places throughout the application by just simply importing it. And the same through the same logic, we will reduce our code redundancy, and the application will be more performant also. Yeah.

Okay. When would you consider using CSS module in a project, and what benefit do they provide over traditional CSS? Okay. Okay. So using CSS module in a project can be a great choice, under, like, there are some benefit of using CSS module, like component based, architecture. When your project is structured around a reusable component, CSS module help to encapsulate, the style for each component and avoiding the, avoiding the global name, skip of pollution. and in case of a large core base, so we can, use the CSS module rather than our traditional one. And, so and also what it helps is in, the modular, it the code, CSS code would be more modular and maintainable, when you need to, ensure that the Styler scope locally and component locally to the component, improve it also improve the maintainability and the readability. So apart from this apart from this so what benefit we can see is the CSS module automatically scope the CSS by generating the unique last name and preventing it prevents conflict, Then what we can use is, we can avoid the global, name skip pollution, and then we improve the, maintainable. It is easy, to maintain when you write, c when you use CSS module, rather than a traditional one, then yeah. So yeah.