Mayank Sunder

Yeah, I am a front-end developer. I am having three years and nine months experience and I started my career with WaveNet Solution which is a start-up which later on got merged with Amante Technology. There I have made like three projects, two of them for Staff Selection Commission of India, that is for SSC and one is for US-based project called Genadyne, one generally is medical and another is education and admin and I have implemented like many things there like one of the CSV download, PDF download, Excel download, like also like automating the data flow by the CSV upload also. So I have done this thing in that company and after that I got selected into Capgemini. I have cleaned the various reports like Sonar, VAPT vulnerability and penetration testing and I have also made one project from base, like from scratch I have started it and also I took a bug on one immediate project of React there and also after that I joined Coforge in which I have done, I am in a SCI project which is a like very big project like all the big tech giants like TCS, Cognizant and all other are working together, it's like thousands of employees. At first six months I was just providing a maintenance and support to them and after that I got selected into the only developing team in that project, TransferFixer and also I have, after that I have made one functionality by my own that is like DocVault which is, which resembles the Google Drive and I, the languages that I am proficient in is JavaScript, React, Angular, HTML, CSS and I have, I can call myself more of a JavaScript developer because my concepts are very clear in that and also I have like all the, I have knowledge of all the latest features and previous features of base features of JavaScript and TypeScript, all the classes and my hoops concepts are very much clear and in React also I know both of type of coding like from class based also and function based coding also and in Angular I have very good experience, it's like same, like in React, in CSS we have made, I have worked using Sass, the latest techniques and yeah, that's all from my side about my experience.

In what scenario you would implement? Thunk middleware in a Redux application. Actually, first of all, that we use reducts in a very large scale application where we need a global state, And, uh, we need to, uh, get this to update the state again and, uh, very frequently. And, uh, so so and then middleware is used in Redux applications to handle asynchronous sections, uh, like API calls where we need to make a API request to fetch or send data. THINK 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. Uh, the actions which involve multiple steps or complex logic can enable us to sequence this step within a single action. Can I can also use it in conditional dispatching? If we need to dispatch actions, uh, conditionally based on the current state or the criteria, trunk provides the flexibility to implement this logic side if by in side effects, then we need to perform a side effect such as logging, navigation, interacting with external service, Thunk allow us to encapsulate these side effects within our within our action creators. By using Thunk middleware, we can keep our action creator the creator's pure and our application logic organized, making it more to manage and test. And, uh, also, like, uh, it's generally used for handling asynchronous sections, like fetch if I check for, like, uh, in progress to handle API response. And, uh, actually, Redux is, uh, basically, we need to know the concept of Redux. That Redux is used in the large scale applications for data management. And think is like, it's we it is used in, like, API calls, complex action, conditional dispatching, and conditional logic. Many if we there are many side effects like loggings. Uh, we, uh, when we log in, our state changes. When we navigate, uh, it, uh, the the router get changed. So, uh, it it is, like, back on the change. And, uh, benefits of using 10 middleware is, like, it simplifies our asynchronous logic. Thang me middle where middleware allow us to handle asynchronous operation, uh, in a clear and maintainable way and avoiding nested callbacks or complex, uh, promise chain. It ink encapsulates side effects. By placing side effects in action creators, we can keep up our reducer pure and focused on updating state, which makes the application easier to, uh, reason about and test. It improves re visibility. Uh, action creators can handle more complex logic while cleaning the, uh, uh, reduction setup clean and straightforward. This separation of concerns makes, uh, the code base easier to understand. It is flexible and powerful. Then provides a powerful tool for handling a wide variety of situation that we go beyond simple synchronous state updates giving us the facel flexibility to implement advanced features without complicating our reducer. Uh, 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 need 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 navigate back and forth between steps, managing states across the challenges I am facing. Managing states across multiple steps. Each step had its own substrates of data and navigation between steps needed to preserve the state. Conditional rendering. Some fields in the form were shown or hidden based on the user's input. Validation form data had to be validated at each step and provide immediate feedback to users. Asynchronous operations. Certain steps required data to be fetched from an API to propose, download, or validate. Modularity. The form needed to be modular and reusable across different parts of the application. Its solution is using Redux with design patterns. State management with Redux. I used a single Redux tool to manage the entire state. The state was divided into pieces for each step, making it easier to manage and update specific parts of the form. Action creators and thunks. I created action creators for updating from fields, navigating between steps, and handling API response. Thunk used the thunk middleware for handling asynchronous operations like fetching data from an API. This allowed dispatching actions before and after the async. Call managing loading states. Reducer and normalization. I created reducer to handle the update to the form state. Each reducer was responsible for updating its specific part of the state. Normalization used normalization for API to maintain consistent state shape, making it easier to update specific parts of the state. One is left is selectors. We used selectors to derive data from the state, making it easier to handle complex calculations or conditional rendering in the components. Component structure is like container components. We used container components to connect the Redux state to the form components. Presentation components were responsible for the form fields and handling the user interaction, keeping them stateless and focused. And also for like form navigation.

How can you optimize performance in react application when you have numerous components like re-rendering, okay. There were like we can improve our performance in react application when we have numerous components while re-rendering. Is that like we can optimize it by like first is thing is memoization we can use the react.memo we use react.memo to memoize functional components. This prevents re-render if the props have not changed. Use memo we can use memo to memoize expensive calculation within a function components. Use callback we can use callback to memoize the callback function should and for the class based component there is should component updates or pure component should we should implement should component update in class components to prevent unnecessary re-renders. It works exactly like memoize and like in pure component we can use instead of using react.component we can use react.component for shallow prop and state comparison. We can avoid inline functions and objects, avoid inline functions, define functions outside of the render method to prevent creating new instance on every render. Avoid inline objects, define objects outside of the render method therefore or use memo to memoize them. Efficient it can be also increased by efficient state management. Only lift state up as far as necessary to avoid excessive re-renders of the parent. Limit state divide state into smaller more manageable pieces to limit re-render to specific parts of the component tree. Virtualization react virtualize react window use libraries like react virtualize or react window to efficiently render large list by only rendering the visible items and also like code split we can use the lazy loading in react that is very helpful. And like in lazy loading we it decreases the load on the initial initial render and also that application become very lightweight and throttling and debouncing like it generally used into the input and where we need like DOM manipulations. The throttling generally is used into DOM manipulation because it consists of a time span and debouncing is distinguished between two conjugate in events. We should ensure that keys in list are stable and unique to avoid re-render of list items. We can correctly specify dependency array in our use effect so it can only re-render if there is a change. We can use immutable data structures which help us in optimizing components update as it simplifies the comparison of previous and next state props. Profiling and monitoring react devtools profiler use react devtools profiler to identify performance bottleneck and see which components see render frequently and that's all for this lesson.

technique would you use? I think it's like same like previous one. Okay, to prevent unnecessary renders in a component tree in a react we can use the use memo for functional components so it is a higher-order component that memo is the output of the functional components it prevents re-render if the props haven't changed that is used in a functional component and for the class based components we can use react.pure components which automatically implements should component update with a shallow prop and state comparison and we should implement should component update in class components and we should memorizing callbacks and values use callbacks to memorize function preventing them from being recreated on every render use memo to memorize values of expensive calculations avoid inline functions and objects define functions and object outside of the render methods or memorize them to avoid creating a new instances on every re-render optimizing state management lift state up only as far as necessary to prevent a higher-order components from re-rendering unnecessarily split state into smaller more focused pieces to limit re-render to specific parts of the components use key props correctly ensure that keys are stable and unique in list to prevent re-renders of the list item efficiently handle state like by using a throttle or debounce if like if there is an input we should use debounce because it gives a track between the last two concurrent actions and throttling when we were manipulating our DOM because it's like more in the time basis that after every time the event got triggered it should update and we should avoid unnecessary state and props maybe should minimize the use of local component state and props to what is necessary pass only required props to child components we should use immutable data structure using immutable data structure can help in optimizing update as it simplify comparison of previous and next state props profiling and monitoring checking which component is by using the tools which component is re-rendering more often we can use the custom move to encapsulate and share stateful logic without affect the component tree and we should use the conditional re-rendering render components conditionally to avoid rendering unnecessary parts of the UI I think by implementing these techniques we can make our component tree and react make less renders that's for all this

Share an approach where you have used to improve API call performance in React application. Okay, API call performance in React application. Improving API call by like optimizing fetching and caching strategy like client side caching with React query, React query is also known as 10 stack query is a powerful data fetching library that provide features like caching, synchronization and background updates out of the box. We can set up and configure that accordingly and in fetching data with React query we can also debounce, use debouncing and throttling in API like instead of like I have used it in a input when we were making a call on the search in a input field like when we were calling in a input field that it should only be called if the time between the two concurrent keys is more than 300 millisecond so that it doesn't calls on every time and in throttling also like when we were going down we instead of calling data in every going down we should like it should occur only after some time and it is useful for infinite scroll or window resizing event we can also use the server side re-rendering and static side generation by like which is used and when server side rendering fetch data on the server at the request time and static side generation fetch data at the build time so by combination of that we can also increase the performance of API, improve perceived performance by updating the UI before the server responds then rolling back if the server returns an error this is also like optimistic updates and lazy loading and code splitting, load components and data only when needed to reduce the initial load time so if the components were all the components were not loading so there will be also less calls because on initialization we are not calling that much APIs and use efficient data structure and algorithm, optimize data structure used in our application and we can choose efficient algorithms for data manipulation and rendering and by I think 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 might be to the issue is set state being used in Stein the component did update left user profile extends react.component did update in previous props if the props or dot user ID is not equal equal to previous dot props user ID then this dot set state loading is equal to default 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 it not controlled can repeatedly set state and fetch data data so yes it can cause an infinite loop because every like 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, like component re-render more often than necessary, which can degrade the performance, we can troubleshoot by using the react-dev-tools profiler, use the profiler to identify the components and re-render frequently, react.memo, memoize the functional components to prevent re-renders when props haven't changed, we can also use pure component for like class-based components, we can use pure component or implement should component update in class component for a shallow comparison of props and state, we should avoid inline functions objects, define functions and objects outside the render method, or memoize them with the use callback and use memo thing, and expensive computations during rendering, performing heavy computations inside the render method can slow down the rendering process, for troubleshooting them we can memoize expensive calculations, we can use web workers which can offload heavy computations to web workers to keep the UI responsive, and the other thing is like large component trees, pitfall rendering large component tree can be slow especially if many component updates frequently, troubleshooting using a code splitting, we can use dynamic imports and also use react.lazy for like lazy loading, we can use the virtualization, use libraries like react-window or react-virtualization to render visible items in large list or table, there can be a state management issue, inefficient state management can lead to excessive re-renders and slow performance, for troubleshooting that we can use the context API, avoid over using the context API for frequently changing the state, Redux react query use the state management like or react query for more efficient state updates, splitting state we can split state into smaller localized pieces to limit the scope of update, there can be memory leak, pitfall of memory leak can occur if components are not properly cleaned up leading to increase memory usage, clean up in use effect ensure that side effect in use effect are properly cleaned up, unmounting components, handle components unmounting correctly to prevent retained references, large bundles and slow load times, pitfall large javascript bundles increase the time to load and parse the application, to troubleshoot them we can use the code splitting, split our code into smaller bundles, tree shaking ensure that and frequent re-render due to props and state change is also one thing and also one more thing is like inefficient reconciliation that occur in a react query.

Given a complex user interface with react, how would you go about redesigning it without sacrificing the user experience, given a complex user interface built with react, how would you go about redesigning it without sacrificing the user experience, like redesigning a complex user interface built with react for better performance while maintaining a high quality user involves a strategic approach, here are steps like profiling and identifying the bottlenecks, like react devtools profiler, use the profiler to measure the performance of our application, identify components that re-render frequently or taking a long time to render, performance monitoring tools like lighthouse, web vitals and custom logging to identify slow pages and interaction, optimize component rendering, use the react.memo and pure components, use react.memo for functional components and pure components for classes components to prevent unnecessary re-rendering, we should implement should component update for class components, implement should component update to control when the component should re-render, we should split large components, break them down into small large components into smaller and focus components to minimize scope of re-render, efficient state management, localize state as local or possible like use state and use reducer within the components rather than lifting the state up, redux and context api for global state use redux or context api wisely, avoid deep updates in the context state to prevent re-renders of all components consuming the context, lazy loading and code splitting, react.lazy and suspend, use react.lazy to load component on demand, dynamic imports, split code at logical points to reduce the initial load time, memoize and callback, use memo and use callback, memoize expensive computation and function passed as props to avoid unnecessary recalculation to re-renders, optimizing lists and tables, virtualization use libraries like react window or react virtualize to re-render only the visible items in large list or tables and the keys in list should use stable and unique keys in list to help re-render efficiently and define which items have changed with decrease the re-render, optimize event handling by using a debouncing and throttling, debouncing should be used as a highly searchable things like in when we were searching on key presses and throttling should be used at when we were like using the infinite scroll bar and also that resizing event, efficient css and styling, css js library, use library like style component, emotion to avoid unnecessary style recalculation, we can also use css module, minimize network request, we should use at client side caching and optimize our ui updates by updating the ui before and optimizes assets and bundle size, optimize tree shaking

Can you demonstrate the use of higher-order component in React and its manual? Yeah, higher-order component is a component which takes input as another component. That is used when we were making something like swiggy or thing and we need to reuse that component and 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 like it's like when we were behaving like same business logic or like we need to generally it helps to reuse the previous component. So that is the use of higher-order components and a practical example of higher-order component is like that I have used it in while I was making my own project. So when we were showing like most visited restaurants, so we just passing restaurants to the higher-order component and we were getting that and the main benefits is that it allows us to reuse the logic across multiple components which improves maintainability and reducing the code duplication, separation of concern by moving shared logic into higher-order components. We can keep our components focus on their primary responsibility leading to more 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 application. And I think that's all for this episode.

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