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 Clitter task. And I majorly worked on React JS during my 6.5 years of experience. Here, what I used to do is I take the cabins from the product managers, convert them into technical stories, and then try to convert them into technical specs. Then I try to assign the task to the team, and I take up the complex tasks and assign them to myself. I use to build up reusable components so that they can be used across our application, and I also work on performance optimization techniques used in React. So I majorly work on the front-end side. Also, in this process, I try to develop the API contract, which is required by the back-end team. So providing them the API contract is also a part of my role. So that's it.

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

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

Okay, outline the steps for connecting the ad component to our Redux store. So, there are a few methods which we can use to achieve this. Certainly, to achieve this, first, we install the Redux and the React Redux packages, and then we create a Redux store. And then we define the root reducer and the reducers also. Based on that, we have a selector, like, the user selector through which we can connect our component to the store. And that selector, what it does is it gives us complete access to the store, which is in the Redux. So through the user selector, we can connect our component to the store. Earlier, we had a connect function, which was a higher-order function that accepted the map state to props and map dispatch to props. 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 managing the hierarchy without using Redux, so we can leave the state of the component using the useState hook. The useState hook is a way to manage the state of the component within its scope. The second one would be through prop drilling, where we can pass props from one component to another or others. We can also pass data from a child to a parent through callbacks, using props properly. Additionally, we can use higher-order components or render props to manage the state. Through these techniques, we can manage the application state in a component hierarchy. So, yeah.

Strategy strategies do you use to optimize the rendering performance of a React application? So we have strategies for performance. So what we can do is use React memo for functional components, which wraps the functional component with React's memo to prevent unnecessary renders when props haven't changed. This is one technique. Then we have shouldComponentUpdate or PureComponent for class-based components, which are part of the lifecycle methods, and we can avoid using inline functions, which can also be optimized. We also have hooks such as use memo and use callback, which are used to memoize expensive calculations and functions. We have code splitting, so React has React lazy and suspend to load components, which introduces an initial load time. Through this, we can also optimize performance. In cases where we have a large set of data, we can use virtualization in that scenario. So, these are the few strategies through which we can optimize the performance of a React application.

Ensure unit tests are comprehensive and maintainable for React components. We can use a testing framework or library, like Jest or Enzyme, for testing. The testing library is for rendering the component. We can write a clear and descriptive test. When writing test cases, we should write a proper description to each test suite to explain what it's trying to do. Then we can test the component behavior, not the implementation. Testing the component behavior helps us understand whether we're achieving what we're expected to achieve. We can use mocking and stubbing of APIs to test whether we expect from the API. We can test the external dependency and isolate the API to test the API thoroughly or the response we're expecting from that function. There are discovery tools, like Jest's coverage, through which we can check the coverage of our test cases and discover all the code we've written. These are the few things through which we can ensure we're writing a comprehensive and maintainable test case for React components.

Implementing theme switching in React involves managing the state globally to apply different styles based on the selected theme. We can use the React Context API for this purpose. To begin, we define the theme context globally. Then, we can use the styled components library to apply styles based on the current theme. This way, we can create teams and provide team data along with a function to toggle the theme. For implementing the theme context, we can use the React Context API and styled components.

Server side rendering has its own benefits. For instance, when a normal React application is not SEO friendly. There's a popular framework that simplifies server side rendering for React applications known as Next.js. We can then choose our framework and leverage it to help with initial data fetching. It fetches the data on the server side before rendering the component, which ensures that the data fetching logic is consistent between the server and avoids discrepancies. Apart from this, when we develop an application with server side rendering, we ensure that metadata such as title and description is rendered on the server for SEO benefits. We use a library like Next.js to manage metadata. We can also use code splitting to reduce the initial load time. We can use tools like Webpack or Vercel, and we can use dynamic import. We ensure that code splitting works seamlessly with server side rendering to avoid any issues. Then, we can implement caching to improve performance and reduce server load. We use a caching header and a server side caching solution like Redis.

How do you approach implementing custom hooks in a React application for reusing logic? So, we can use custom hooks. Let's suppose we have a component where we've written a boost effect, which calls the API call and stores that response into our internal state of that component. We can extract this functionality into our custom hook, and that custom hook will only deal with the logic of fetching the data from the network and then return the response directly. So, if we do this, instead of writing the same logic again and again in all different components, we will be reusing that logic in our custom hook. And then we can reuse this logic at multiple places throughout the application by just simply importing it. This will reduce our code redundancy, and the application will be more performant also.

When would you consider using CSS module in a project, and what benefit do they provide over traditional CSS? Using CSS modules in a project can be a great choice, especially when there are benefits to using CSS modules, like component-based architecture. When your project is structured around reusable components, CSS modules help encapsulate the style for each component and avoid global namespace pollution. In cases of large codebases, using CSS modules is preferable to traditional CSS. Additionally, CSS modules make the code more modular and maintainable. They ensure that the styling scope is local to the component, improving maintainability and readability. Apart from this, CSS modules automatically scope CSS by generating unique class names and prevent conflicts. This avoids global namespace pollution, making it easier to maintain the code.