Dipta Biswas

So, yeah, so, yeah, my name is Ipto Visas. I am from a small village in West Bengal, India. And I have started my career in 2020 as a full stack developer intern. And after that, I moved to full time role in the same company. I get to learn more about ReactJS MongoDB node in depth. And I started building more applications with front-end, developing front-end applications using React and JavaScript, as well as I also started learning the CSS part. After that, I moved, built multiple projects on my own. And I moved more to, as I building and developing applications as a full stack developer, but I, my more interest has in the front-end. So I call it, call me as a front-end first developer, because I love to, love playing with the UI and see what is going on the UI. And also love the animations in the front-end. Other than that, I also worked in the back-end using Node.js and MongoDB. I have experienced the NoSQL database as well as DynamoDB and AWS database. Also, I, in my last company, I also worked in the serverless architecture, which involves Lambda functions, AWS frameworks, et cetera. And recently I completed a Google Drive clone application that simulates all of the major functionalities that Google Drive provides. This is, this project I built my own, built by myself, and yep, this is all about me.

React app performance has degraded significantly data volume to, let's take reactive tools. So first of all, I'll check the front end part that what needs to be modified to improve the performance. So from the front end part, I'll check React rendering, how the component, how each and every component gets rendered, and I will also check the profiling of, by using help of React profiler, I'll check the rendering. And other than that, I'll check the integration part, if there is any list or if there is a list that is being rendered without any paginations or implementing any cache. So I'll implement that to improve the UI performance. I also, if there is, the list is really big, I'll introduce React virtualization on that list to improve the performance. Other than that, in the front end, I'll keep monitoring the web titles so that it can maintain, it can be maintained as per the Google standards. And on the backend part, on the backend part, I'll check and monitor the API routing with the help of any dev tools, DevOps tools like Graphana or something, which can be, which can help me to monetize the monitor, help me monitoring the API performance. So on the API end, if I also need to introduce the caching with Redis, as well as in the MongoDB profile, I'll check also that how much it is getting the connection, how much connection it is making, and how I can implement, leveraging the MongoDB pipelines to reduce the, improve the performance.

You are building the dashboard that needs to display large data sets, example. Roh, how do you ensure the smooth rendering options? So, for large data sets, listing of that data sets, I'll first introduce browser pagination. If it needs to be rendered from the browser, I'll load this, I'll first get the data from the backend and then divide into chunks like 10 or 20 data per attempt and implement the infinite loop. And moreover, extend to this approach, I'll add one performance improvement tool that is React Virtualization. So that will improve the rendering part, listing of that data sets more performant.

Look at the scenario as an atomic operation. I'm going to be critical within a no depletion. How do you achieve it? So, for atomic operation, I'm getting that MongoDB provides the transactions that MongoDB handles to make sure that whenever the data is being passed to multiple, suppose there is a relationship with the multiple collections and the data needs to be stored in the multiple maintain the multiple connection or there is a dependency between the collection depending on the data that comes from the front end that needs to be stored synchronously. So on that and the data cannot be modified between the collection because if that data get modified, then the consistency of the data would be broke, right? So to maintain the consistency of the data, MongoDB introduced transactions and it gives us the session that can help to maintain the consistency. To break sometimes it is a bit difficult to maintain the consistency because of the concurrency multiple request has been made to the backend and MongoDB tries to save all the data and retrieve at the same time. So that point MongoDB cannot retrieve the updated data. So we need to prioritize that the read property of the data that can be used with the MongoDB with transaction function.

Examine this JavaScript function that is intended to return a new array with each element squared. Can you identify any logical issue in the program? So here the i goes to from 0 to array.length equals to array.length. It should not be equals to, so the condition would be i less than array.end because if it is equals to then the element would not be there because i starts from 0 not 1. If we go to up to length then it will be undefined on that case, the array of index will be undefined. In that case the square will be in n.

And then what method would you say is essential for unmounting the components that involve on the API request? So we have the abort control in the JavaScript API. So where we can pass the signal when a request gets made by the browser, and that signal we can pass to the abort controller when we about to unmount. So that the abort controller, with the help of abort controller, we can cancel the request at the same time.

Explain a method to efficiently execute complex queries in the MongoDB needs to be read and write in data. So, for read operation, we can maintain indexes in the MongoDB. Okay, for the first point, I had mentioned that, but to maintain the MongoDB efficiency, I read about the MongoDB documentation that if you use MongoDB as a relational database, like if you use multiple lookups that won't be efficient enough in the long term if the data gets more complex. So, MongoDB suggests to use replicas, I mean create one, if the data it requires to another table, the relations is to another table, MongoDB suggests to create a duplicate data in there. So, we need to create duplicate data to maintain an efficient read and write for the complex queries. But, at the same time, we also need to maintain, if there is a data duplicacy, we also need to maintain that.

Given this rear component state management approach, can you explain what potential issues may arise? How could it be improved considering best practices? So, here I don't see any return, okay, but I don't know if there is, this is the issue but another one I would, I like to mention here is to use the increment count, right, and to use this as a state and increment count to avail this dot set state, we need to bind the set state, bind this increment count method inside the constructor so that this is available to that method, that is the thing but again I am not sure about the return, why it is not present there, it will be better to have a look on the return, yeah.

How would you refactor a large react component that is difficult to maintain due to complex state and has side effects? For large react component, if it is a single component and we have, suppose we have a local state, multiple local state, that is difficult to maintain, yeah, that is difficult to maintain because of the state management and multiple AP calls would be there and multiple state management would be there, right. To maintain this and maintain in more efficient way, we can split some of the components, some of the division of particular component in that component and maintain it as a separate component. So suppose if there is, we have multiple sections like list, there is, we have in particular one component, we have search box and we have list and we have paginations also, right. So we can do one thing, instead of maintaining this in only one component, we can maintain this with this, each and every separate component we can create and we can maintain the each and every states over there. Other than that, if it is only for one component that is not being affected to the outside of that component, I mean, that is not being affected to outside of that component, means the parent or something like that or if the data of that component is only be used for that component only, then we can isolate that component state with the help of context, use context and use reducer state. Use reducer will help here to segregate between states, right. So for that, suppose in that component we have multiple states, so we split the component into multiple sections and in a separate file and we can call that component, this chunks component in parent component like one component that is we are modifying. So and if the state are related, I mean, we can isolate the state that is not required for the outer layer but if the state is required to outer layer, we can maintain, use context hooks, okay. We can create context and provide the state throughout this component layer. So that every other child of that particular component can be, can have that listed states. So this is the state logic and the side effects also we can maintain by different component, creating different component and we should avoid the prop dealing approach as well. That is the go-to approach to optimize the large component to, so first of all would be split the component, split the states and maintain one singular states that can be overall managed by all of these components, yeah.

If you have memory leak in your node application, how you go about diagnosing and solve? So I would use performance tab in Chrome DevTool to get the memory leak. So there is a graph in the performance tab which identifies, which can increase if there is a memory leak, the heap storage also and other than that the CPU also. So I would look into that CPU and heap storage stats and based on the stats I will try to find that which function of that, which is the, which function caused that memory leak. So by using this I can, it is little bit time consuming but yeah, I can, it is more helpful when we have the memory leak and we don't have any idea which functions are causing this memory leak.