Sakib

So, hi, I'm Mohammad Saqib and I have experience of around four years. So if I talk about my professional experience, I have worked with both product-based as well as service-based company. Currently, I'm working for a US-based jewelry company and in my current company for tech stack, we use MonStack and for front-end development, we primarily use ReactJS as well as Next.js and for back-end developer, we use NodeXpress and for database, we use MongoDB, SQL, etc. And other than that, we have also used Jenkins for pipelines, Git for version control and Kubernetes and Docker for Dockerizations as well as AWS services like EC2, ECR, ECS, Route53 and other for DevOps purposes. I'm a MonStack developer with about four years of experience. I'm primarily focused on front-end development. I have experience with a lot of frameworks like React, Next.js. I have experience with server-side rankings and others in best industry standards that we should follow and I have done my graduation in computer science. So if I talk about the kind of projects that I have done within my current organizations, I am, first of all, let me elaborate my roles. I am senior front-end developer, tech lead in my current project. So currently, we are developing a protocol generator so that our time-to-market can be reduced by a lot. We have already successfully reduced our time-to-market by 15 times and other than that, I have worked with a lot of critical functionalities as well as some crucial products. For example, there is another project with the estimate sales value of $20 million and I have worked on it from end-to-end. And if I talk about some of the critical functionalities that I have worked with, they will be card flow and payment gateways functionalities. For the card functionality, I have improved the code quality and resolved the issues with card merging functionality in particular and by that, we have reduced our card failure rate by around 60% which was a major breakthrough for a company website that have around 1 million of daily traffic as well as around 10 millions of views on special occasions. For these, I have rewarded quite a few employee of the month and other environment. So these are my basic introduction, thank you.

How would you optimize the react application performance, minimum render and maximum code reproducibility? For doing this, what we will do is we will follow the best industry practices. For example, I will try to divide my entire functionality base or component into as small pieces as possible. This would be a very helpful method as now the states or the things or the effects that actually affects the render will be minimized to the, will be localized to the area of impacts. For example, if I talk about a particular case, if I need a list component in which there is a functionality of pages and limit, which I am going to show into its footer. Now this kind of functionality does not affect into much. These are kind of functionality that only impact the footer as well as helping API callings. Then what I would do is like I will try to make a footer component and make states as closely as possible to the actual components that actually needs it. Other than that, there are quite a few techniques that I will use. I will use the hooks like the context hooks and other, so that my code quality can be better or also I will take a special notes for the kind of effects. If I implement an event listener in any of the component, then I would make sure that I should clear up those event listeners. There are also many other things that we can use. I can use advanced hooks like use memo, use callbacks so that I can optimize my performance of my webpages. So these are some of the techniques or some of the method I would personally use so that I can optimize my react application performance and also ensures minimum re-renders and maximum code re-velocity. I can also do like importing for the heavy libraries. I can import on the client side or I will use lazy loads. These are some of the methods that I would personally use for this.

Making a larger scale React applications are I would create a global, uh, global classes so that my, uh, code can be uniform. I will, uh, I will try to make my code as uniform as possible, uh, as uniform as possible. I can also, uh, I could use many other another things, like making the classes directly relevant to the component. Rather than passing it from the styles, I can also use this inline styles to override the previous styles. These are the some of the best practices that, uh, I can follow for a large scale React applications. Thank you.

Describe how you would implement a feature that allows user to dynamically show the list of items, uh, in React application. If I have to implement a feature that allow users to dynamically short a list of items in a React, uh, application. I'm guessing that by dynamically here I'm assuming that by dynamically here, uh, it we are saying that, uh, it would be based on some field or some values. So what I would do is, like, I will initially renders, uh, render the list based on, uh, based on the whatever the default value that I can get. Uh, and another then, I will implement the kind of I will implement different filters. And, uh, based on those filters, I will short it on the parent levels. I will implement those filters. And, uh, another thing I would do, I will implement the paginations and another, uh, paginations as well as, uh, uh, another things, like, the what are the current amount of limit by, uh, these things, I can short it, uh, it efficiently. I will, um, depending upon my use case, I will use different sorting algorithms. I can use different sorting algorithms, uh, so that my list can be optimized. So these are the kind oh, this this is how I would implement a feature that will dynamically show the list of the entry application.

It returns your level 3rd party JavaScript that manipulates the tone. For this, what I would do is I will use, uh, set dangerously HTML. I will what I've initially, what I would do is, uh, depending upon use case, I will import the library dynamically, uh, in in my component. And, uh, when the, uh, when the list has been called, I will set it to using the 10 gs circle HTML element. These are the kind of method that I will, uh, use, uh, so that, uh, JavaScript library manipulates the tone. Uh, For these things, uh, what we have to ensure also ensure its security and as well as integrity, uh, we can do these kind of things using, uh, using we can search through various forms or use Bandlifropia kind of tools that tells us, uh, what kind of, uh, so bundle 5 is for package specific, but, uh, we can you we can, uh, all we should also only trust the, uh, verified, uh, verified vendors that provide search JavaScript libraries. These are my these would be my approach to integrate a 3rd party library into React application.

Since then, you can components. If I talk about my part, uh, my strategy for conducting efficient unit testing on real components. What I would do is that my each of my component, uh, should be well tested, uh, by by checking what kind of, uh, what kind of things it renders based upon types of props or the input props or the different input variables that it needs. These and what kind of effect it reduce depending upon the user actions and other things that it, uh, renders. For example, if there is a button, uh, I have a that that is also element. But, uh, if I talk about a particular component, if there is a form, then what I would do here is I will beat, uh, for every field there is, I would be properly define what kind of checks it's need to be passed, what are the kind of errors that it can get, and, uh, get, uh, what kind of values it would handle when while submitting, what kind of checks that it need to be passed. These are the kind of strategies is that I would personally use to conduct, uh, efficient unit testing on real components. Thank you.

And the component using the context API explained why the context values might not trigger the rerender on consumer, and how would you fix it? So in the state, there is a number value of 10 and render this dot props dot children. Okay. Um, the state has not been setted into constructor and consumer, the context. So if I'd, uh, hit talk here, that first of all, I have created a context. Okay? The provider, uh, in my provider, I have passed the state. Okay. Okay. Okay. So what will happen is I'm not actually very familiar with the function based component, but I will try to, uh, try to solve these questions based upon the requirements that, uh, we are passing here. So what would happen here is, like, in, uh, it won't work because, first of all, the states and the first, we have never, uh, updated. We have never set it up, uh, we have never passed the set of functions that actually updates the state. We have already only passes the kind of values, which is also a static value, uh, static value. So there is no, uh, there is not many method, uh, particular, uh, using that, uh, we can, uh, using which we can trigger those re renders, or we can update the state. Hence, it won't trigger re render. Uh, so that's the reason. Thank you.

Examine the full line code as an as noted for function. Can you spot the issue with how the state is being updated in suggestion? Signature. Signature. Can you spot the issue with how this one? Function signature. So, uh, let's just say if, uh, initially, if the increment function is called here, the initial value will be 0. Then, uh, when the function is called, it will, you know, it will increase the counter by 1 and, again, the counter by 1. Now that we know that, uh, state doesn't actually update the value of the value, uh, instantly, it actually waits till that render cycle has been completed. And then, uh, it renders with the new values, uh, of new values. So what would happen here is as we know that, uh, both these values are asynchronous and is called within the same, uh, guaranteed to be called within the same render cycle. So what would happen is, like, in both the counter, we have done the counter plus 1, which is, uh, which is not actually updating this uh, sorry. Which is not actually the updating the, uh, the, uh, value of, uh, which is not actually reading the current value of the counter. As, uh, when the first counter is called, it is, uh, the value has been in pass to so that it can be updated. But, uh, for the next count set counter also, the counter value would be still the original value, which would be 0. And so even if the both set counter is called, the value will be only called once. So what we can do is here, we can either, uh, pass a call uh, update the state using callback, uh, which can actually take its, uh, actual value. Or another thing we can do is, like, uh, we can give some check based on some state so that, uh, the renders only happens after the previous value is updated. So by these things, we can, uh, preserve the functionalities, uh, yet, uh, we can work with it. So these, uh, this is how we can do we can, uh, update, uh, we can update the value and without modifying the function signature. Thank you.

To reflect a larger risk to implement the ability and credibility. What kind of pressure I would use to maintain a large read access to improve its maintainability and functionality, uh, readability? So for this purpose, what I would do is, uh, initially, I will properly determine what kind of, uh, what kind of, uh, states that I will use. I will use another, uh, quite a few techniques that are available in the market, like normalizations and other techniques so that, uh, my, uh, my readability can be improved. I should also use proper, uh, proper methods so that, uh, so that my code can be scalable. I should not be hard coding this. These These are kind of things that I would use to refactor a large Redux store. Thank you.

I'm back in service with the React front desk to bless him. For how would I even so if I talk talk about the specifics, then what I would do is, like, I will, uh, for the Node JS, I will, uh, create the rest APIs or another a AP calling, which, uh, and using those thing, uh, we can communicate using passing the JSON or the another other things within both services as we know that both of these service, uh, are in the should, uh, if I talk about multiservice architecture, then both of these service should be independent of each other, and only communication should be happen on the common and and the data structure that both can understood, which will be JSON here. So I would what I would do, I will host the node application in the separate, uh, uh, separate containers if it if I use those, and I will host the React application in the separate. And then I will use the various APIs, get, put, post, delete, and other the APIs, rest APIs. So the methods so that, uh, we can communicate it seamless. Uh, and if I talk about in front end specifics, what I will do is I will handle all these API calling separately, separately and using async and await so that our functions can, uh, run async and does not impact the performance of our front end react applications. Thank you.

My performance to optimize but this has improved loading time. So if I, uh, if I have to configure a Webpack for react application, first, I will reuse some of the Webex like Babel, uh, which can support both transpilation as well as bundling. Uh, bundling, uh, I will clearly define kind of the the values, uh, the files that it need to be bundledized and properly integrated. I will, uh, make it so that all the the bundle that get created is should be created in the separate, like, separate file, uh, file structures so that it can be easily managed. And, uh, this is how I will configure it.