Mayank Sunder

Yeah, I am a front-end developer. I have three years and nine months of experience, and I started my career with WaveNet Solution, a start-up that later merged with Amante Technology. There, I worked on three projects, two for the Staff Selection Commission of India, for SSC, and one for the US-based project Genadyne. The projects were generally medical and education/administrative, and I implemented features such as CSV download, PDF download, Excel download, and automating data flow by CSV upload. I accomplished this at that company, and after that, I was selected into Capgemini. I cleaned various reports, including Sonar, VAPT vulnerability, and penetration testing, and I also developed a project from scratch. Additionally, I took on a bug in an immediate React project. After that, I joined Coforge, where I'm currently working on a SCI project involving thousands of employees from big tech giants like TCS, Cognizant, and others. In the first six months, I provided maintenance and support, and after that, I was selected into the developing team for the TransferFixer project. I also developed a functionality called DocVault, which resembles Google Drive. My proficient languages are JavaScript, React, Angular, HTML, CSS, and I consider myself more of a JavaScript developer because my concepts are very clear in that area. I'm also knowledgeable about all the latest and previous features of JavaScript and TypeScript, as well as classes and my loop concepts are very clear. In React, I know both class-based and function-based coding, and in Angular, I have good experience, similar to React. In CSS, I've worked with Sass, using the latest techniques. That's all from my side about my experience.

In what scenario would you implement thunk middleware in a Redux application. Actually, first of all, we use Redux in a very large-scale application where we need a global state. And we need to get this to update the state again and very frequently. And so, middleware is used in Redux applications to handle asynchronous sections, like API calls, where we need to make an API request to fetch or send data. Thunk allows us to dispatch actions before and after the API call, enabling us to manage loading states and handle errors. Like, also, I can use it in complex action logics. The actions which involve multiple steps or complex logic can enable us to sequence these steps within a single action. I can also use it in conditional dispatching. If we need to dispatch actions conditionally based on the current state or the criteria, Thunk provides the flexibility to implement this logic. When we need to perform a side effect, such as logging, navigation, or interacting with an external service, Thunk allows us to encapsulate these side effects within our action creators. By using Thunk middleware, we can keep our action creators pure and our application logic organized, making it easier to manage and test. And, like, it's generally used for handling asynchronous sections, like fetch. If I check for in progress to handle API responses. And, actually, Redux is basically used in large-scale applications for data management. And Thunk is like it's used in API calls, complex actions, conditional dispatching, and conditional logic. Many side effects, like logging. When we log in, our state changes. When we navigate, the router gets changed. So, it is like back on the change. And, like, the benefits of using Thunk middleware are that it simplifies our asynchronous logic. Thunk middleware allows us to handle asynchronous operations in a clear and maintainable way and avoid nested callbacks or complex promise chains. It encapsulates side effects. By placing side effects in action creators, we can keep our reducer pure and focused on updating state, which makes the application easier to reason about and test. It improves reusability. Action creators can handle more complex logic while keeping the reduction setup clean and straightforward. This separation of concerns makes the code base easier to understand. It is flexible and powerful. Thunk provides a powerful tool for handling a wide variety of situations that go beyond simple synchronous state updates, giving us the flexibility to implement advanced features without complicating our reducer. That's for this answer.

Describe the complex state management issues you resolve. The design pattern we have implemented. Okay. Like, as it's clear that Redux is used for state management, basically, global state management. I worked on a web application that involved a multi-step form process where users needed to input various pieces of information across several steps. Each step had its own set of fields, some of which were conditionally rendered based on the previous inputs. The form data needed to be validated, and the state of each step needed to persist even if users navigated back and forth between steps, managing states across multiple steps. Each step had its own subset of data, and navigation between steps needed to preserve the state. Conditional rendering was also a challenge, as some fields in the form were shown or hidden based on the user's input. Validation of form data had to be validated at each step and provide immediate feedback to users. Asynchronous operations were also involved, as certain steps required data to be fetched from an API to propose, download, or validate. Modularity was also a requirement, as the form needed to be modular and reusable across different parts of the application. The solution is using Redux with design patterns. State management with Redux. I used a single Redux tool to manage the entire state, dividing the state into pieces for each step, making it easier to manage and update specific parts of the form. Action creators and thunks were used. I created action creators for updating form fields, navigating between steps, and handling API responses. Thunks used the thunk middleware for handling asynchronous operations like fetching data from an API, allowing dispatching actions before and after the async call, managing loading states. A reducer was created to handle the update to the form state. Each reducer was responsible for updating its specific part of the state. Normalization was used for API to maintain a consistent state shape, making it easier to update specific parts of the state. Selectors were used to derive data from the state, making it easier to handle complex calculations or conditional rendering in the components. Container components were used to connect the Redux state to the form components. Presentation components were responsible for the form fields and handling user interaction, keeping them stateless and focused, as well as form navigation.

How can you optimize performance in a React application when you have numerous components like re-rendering? We can improve our performance in a React application when we have numerous components while re-rendering. That is, we can optimize it by first thing, is memoization. We can use React.memo to memoize functional components. This prevents re-render if the props have not changed. We can use memo to memoize expensive calculations within a function components. We can use callback to memoize callback functions. For class-based components, there is shouldComponentUpdate or pure component shouldComponentUpdate, which we should implement to prevent unnecessary re-renders. It works exactly like memoize, and in pure components, we can use React.PureComponent for shallow prop and state comparison. We can avoid inline functions and objects, define functions outside of the render method to prevent creating new instances on every render. We can avoid inline objects, define objects outside of the render method. We can also use memo to memoize them. Efficient performance can also be increased by efficient state management. Only lift state up as far as necessary to avoid excessive re-renders of the parent. We can limit state by dividing state into smaller, more manageable pieces to limit re-renders to specific parts of the component tree. We can use React Virtualize or React Window to efficiently render large lists by only rendering the visible items. We can use lazy loading in React, which is very helpful. And like in lazy loading, it decreases the load on the initial render, and the application becomes very lightweight. Throttling and debouncing are generally used in inputs and where we need DOM manipulations. We should ensure that keys in lists are stable and unique to avoid re-rendering of list items. We can correctly specify the dependency array in our useEffect so it can only re-render if there is a change. We can use immutable data structures, which help us optimize component updates as it simplifies the comparison of previous and next state props. We can use the React DevTools Profiler to identify performance bottlenecks and see which components render frequently.

technique would you use? I think it's similar to the previous one. Okay, to prevent unnecessary renders in a component tree in React, we can use the `useMemo` hook for functional components. It is a higher-order component that memoizes the output of the functional component, preventing re-render if the props haven't changed. This is used in functional components, and for class-based components, we can use `React.PureComponent`, which automatically implements `shouldComponentUpdate` with a shallow prop and state comparison. We should also implement `shouldComponentUpdate` in class components and memorize callbacks and values. We can use callbacks to memorize functions, preventing them from being recreated on every render. We can use `useMemo` to memorize values of expensive calculations. We should avoid inline functions and objects, defining functions and objects outside of the render methods or memorizing them to avoid creating new instances on every re-render. To optimize state management, we should lift state up only as far as necessary to prevent higher-order components from re-rendering unnecessarily. We should split state into smaller, more focused pieces to limit re-renders to specific parts of the components. We should use key props correctly, ensuring that keys are stable and unique in lists to prevent re-renders of list items. To efficiently handle state changes, we should use a throttle or debounce. If there's an input, we should use debounce, as it gives a track between the last two concurrent actions. We should use throttling when we're manipulating the DOM, as it's more time-based, updating after every time the event is triggered. We should avoid unnecessary state and props and minimize the use of local component state and props to what is necessary. We should pass only required props to child components and use immutable data structures. Immutable data structures can help optimize updates by simplifying the comparison of previous and next state props. We should profile and monitor which components are re-rendering more often, using tools to check which component is re-rendering. We can use a custom hook to encapsulate and share stateful logic without affecting the component tree. We should use conditional re-rendering to render components conditionally and avoid rendering unnecessary parts of the UI. By implementing these techniques, we can make our component tree and React make fewer renders.

Improving API call performance in a React application. One approach I've used to improve API call performance in a React application is by optimizing fetching and caching strategies. I've used client-side caching with React Query, a powerful data fetching library that provides features like caching, synchronization, and background updates out of the box. We can set up and configure it accordingly to fetch data with React Query, and also use debouncing and throttling in API calls. For example, instead of calling the API on every keystroke in an input field, we can debounce the call so that it only occurs if the time between the two consecutive keystrokes is more than 300 milliseconds. This prevents the API from being called on every keystroke. Throttling can also be used when scrolling, so that the API is only called after a certain time, which is useful for infinite scroll or window resizing events. We can also use server-side rendering and static site generation, where data is fetched on the server at request time and at build time, respectively. By combining these techniques, we can improve the performance of API calls and improve perceived performance by updating the UI before the server responds, then rolling back if the server returns an error, which is also known as optimistic updates. Additionally, we can use lazy loading and code splitting to load components and data only when needed, reducing the initial load time. If we were to load all components at once, there would be fewer API calls on initialization. We can also use efficient data structures and algorithms for data manipulation and rendering. By completing these techniques, we can increase our API call performance in each and every scenario.

look at this react component snippet which can you update but the issue is set state being used in the component did update lifecycle method left user profile extends react.component did update in previous props if the props or dot user ID is not equal to previous dot props user ID then this dot set state loading is equal to true the issue with the set state user in the component did update lifecycle method in the provided react component snippet is that it can potentially cause an infinite loop of updates this happened because set state inside a component did update triggers another component did update call which is not controlled can repeatedly set state and fetch data so yes it can cause an infinite loop because every component did update is calling the another component did update and which can cause our infinite loop triggering set state in component did update is called it updates the component state causing re-render this re-render triggers another component did update calls because the component did update its state infinite loop there is an infinite loop risk if component did update contains a set state call without proper condition it will continuously update the state and re-render leading to an infinite loop so solution of this problem is that we should ensure set state is not called unnecessarily we should make sure that set state is only called if necessary set of conditions become true we should complete the fetch logic by making sure that data is handled properly including handled properties and yeah I think that by using that we can make this

What are some performance pitfalls in React and how do you troubleshoot them? Some common performance pitfalls in React are unnecessary re-renders, such as components re-rendering more often than necessary, which can degrade performance. We can troubleshoot these by using the React Dev Tools profiler to identify the components and re-render frequently. We can also use React.memo to memoize functional components and prevent re-renders when props haven't changed. For class-based components, we can use pure components or implement shouldComponentUpdate for a shallow comparison of props and state. We should avoid inline function objects, defining functions and objects outside the render method, or memoizing them with the useCallback and useMemo hooks. Expensive computations during rendering can also slow down the rendering process. To troubleshoot these, we can memoize expensive calculations or use Web Workers to offload heavy computations and keep the UI responsive. Large component trees can also be a performance pitfall, especially if many component updates frequently. We can troubleshoot this by using code splitting, dynamic imports, and React.lazy for lazy loading. We can also use virtualization with libraries like React Window or React Virtualization to render only visible items in large lists or tables. State management issues can also lead to excessive re-renders and slow performance. We can troubleshoot this by using the Context API, avoiding overusing it for frequently changing state, and using state management libraries like Redux or React Query for more efficient state updates. Splitting state into smaller, localized pieces can also limit the scope of updates. Memory leaks can occur if components are not properly cleaned up, leading to increased memory usage. We can troubleshoot this by ensuring side effects in useEffect are properly cleaned up and handling component unmounting correctly to prevent retained references. Large JavaScript bundles can also increase load and parse times, so we can troubleshoot this by using code splitting and tree shaking to split our code into smaller bundles. Finally, inefficient reconciliation can occur in React Query, so we should troubleshoot this by optimizing our queries and using techniques like memoization and caching to reduce the number of queries made.

Given a complex user interface with react, I would go about redesigning it without sacrificing the user experience by following these steps: Redesigning a complex user interface built with React for better performance while maintaining a high-quality user experience involves a strategic approach, starting with profiling and identifying bottlenecks, such as using the React DevTools Profiler to measure the performance of our application and identify components that re-render frequently or take a long time to render. To optimize component rendering, we should use React.memo and pure components to prevent unnecessary re-rendering. For functional components, we should use React.memo, while for class components, we should implement shouldComponentUpdate to control when the component should re-render. We should also split large components into smaller components to minimize the scope of re-render. Efficient state management is crucial, so we should localize state as local as possible, using state and reducer within components rather than lifting the state up. We can use Redux or Context API wisely for global state, but avoid deep updates in the context state to prevent re-renders of all components consuming the context. To further improve performance, we should use lazy loading and code splitting, such as React.lazy and suspend, to load components on demand and split code at logical points to reduce the initial load time. We can also memoize and callback expensive computations and functions passed as props to avoid unnecessary recalculation. When optimizing lists and tables, we can use libraries like React Window or React Virtualize to re-render only the visible items. It's essential to use stable and unique keys in lists to help re-render efficiently and define which items have changed. To optimize event handling, we should use debouncing for highly searchable things, such as key presses, and throttling for less frequent events, like infinite scrolling or resizing. Efficient CSS and styling can also be achieved by using libraries like Style Component or Emotion to avoid unnecessary style recalculation. Minimizing network requests is crucial, so we should use client-side caching and optimize our UI updates by updating the UI before optimizing assets and bundle size. Finally, we can optimize tree shaking to remove unused code. By following these steps, we can redesign a complex user interface with React to improve performance without sacrificing the user experience.

Can you demonstrate the use of higher-order component in React and its manual? Yeah, a higher-order component is a component that takes another component as input. That is used when we're making something like Swiggy or a similar thing and we need to reuse that component. A higher-order component is a component that takes a component and returns a new component with enhanced behavior. Higher-order components are used to reuse component logic, share behavior across multiple components, and abstract away common concerns. So, it's like when we have the same business logic or need to generally reuse a previous component. So, that's the use of higher-order components. A practical example of a higher-order component is like the one I used in my own project. So, when we were showing the most visited restaurants, we just passed the restaurants to the higher-order component and got that. The main benefits are that it allows us to reuse the logic across multiple components, which improves maintainability and reduces code duplication. It also separates concerns by moving shared logic into higher-order components. We can keep our components focused on their primary responsibility, leading to cleaner and more readable code. Enhanced component composition, higher-order components enhance the component composition model in React by allowing you to layer additional behavior on top of existing components without modifying them directly. Higher-order components provide a way to abstract common concerns such as data fetching, authentication, and state management, making our components simpler and easier to test. Higher-order components are a powerful pattern in React for enhancing components with reusable logic and behavior. They promote code reuse, separation of concern, and cleaner component architecture. By using higher-order components, we can create more modular and maintainable React applications. And I think that's all for this episode.

I will install our React testing library, so we need to install the react-testing-library, and React also provides it. So, it is set by React that this library is more good, like I have generally used Jest for running tests, and utilities, utilizing libraries like React Testing Library or some people also use Enzyme for rendering components, mocking libraries, we can use tools like Jest's built-in mocking capabilities or libraries like Cinemon for mocking dependencies and API calls. Organize test files, file structure, organize test files alongside your source files, for example, place test files in a "tests" directory, like components.js, so we should name it component-name.test.js, like this. We can use "test" or instead of "test" we can also name it as "spec", but "test" is more common. We should group tests by functionality or component and write unit test cases, component tests, test each React component's rendering behavior and interactions, logic, and utility functions, test pure functions, utility functions, and hooks, test asynchronous code, asynchronous functions, and API calls using React, await, or promise, mock dependencies and APIs, mock, stimulate dependencies, and external API responses, test coverage, and continuous integration, aim for the highest coverage to ensure critical parts of our application are tested, we can integrate tests into CICD pipelines also to automatically run on every commit or pull request. Maintaining tests, update tests whenever the corresponding code changes to ensure they reflect the current behavior, refactor tests as needed when refactoring code to maintain clarity and relevance, review, and clean up regularly, review, and clean up outdated or redundant tests to keep the test suite efficient and manageable. We should always follow the best practice for test cases, using isolate tests to ensure tests are independent and do not rely on each other, state, or execution order, readable assertions, write clear and descriptive assertions to verify expected behavior, use matchers, utilize Jest matchers and assertion libraries efficiently to simplify test assertions. By implementing these practices in a React application, it makes it robust and maintainable through comprehensive unit testing by focusing on testing individual functions and behavior, we can catch bugs, ensure code quality, and support coding development enhancements, and we can also write end-to-end test cases, as end-to-end test cases are test cases that focus on scenarios, the whole scenarios, like adding to a cart may be dependent on more than one to three components, so yeah, we need to write end-to-end test cases that check all the functionalities, yeah.