Alak Modak

Hi. Uh, me, Alek Mudok. Uh, I am, uh, a full stack web developer, uh, uh, especially, uh, having experience in Mondstack, where Mond stands for MongoDB Express, React. Js, and Node. Js. Apart from that, I have expertise, uh, in Next. Js, uh, which is the super side of React. And and also having experience in mobile application development with React Native. In the back in the back end side, I have expertise in, uh, Nest JS, which is the framework of Node JS. And in the back, uh, database side, uh, I have expertise in, uh, Postgres. Apart from, uh, the code development, I am also proficient, uh, in deployment, uh, in the platforms on the platforms like, uh, AWS, GCP, uh, and and, uh, Jenkins a bit. Uh, and, uh, I spend, uh, most of, uh, my times, uh, into finding, uh, some quality web solutions, uh, like quality and innovative web solutions and to find, uh, some, uh, something great out of, uh, the code, uh, such as optimize the code and also to find, uh, something new, which I haven't, uh, used before. Uh, like, I spent most of my, uh, time in r and d and all. Thank you.

Well, uh, context API, uh, helps us in many ways such as, uh, it it creates one global state, uh, where we can update, uh, the, uh, state data from any of the component, uh, simply because, uh, the whole context would, uh, get, uh, wrapped, uh, and within, uh, that the children, that is the whole application, uh, will, uh, would lie. Uh, because of that, uh, each of the component within our actual, uh, application, uh, get the access to use, uh, the state and, uh, the state value and also have the access to update, uh, this specific state. So with the help of that, we can, uh, like any of the component within that particular application can have the access, uh, of that particular state data and also have the access to update, uh, that particular state, uh, like state value. So in in this way, uh, context API helps, uh, us to pass data throughout the application without using props. But, uh, it it really caused some rendering issues such as, uh, since it, uh, got trapped by the, uh, whole, uh, like, it like, within that context, uh, the whole application got trapped. Uh, so because of that, uh, like, whenever the state, uh, get updated, uh, the whole component whole application got re re rendered again and again. Uh, so, uh, to get out of it, uh, we can go with the stand. Uh, with with the stand, we don't really need to wrap our whole component by, uh, an an anything so that it would render only that particular component wherever we are using the standard rather than rendering the whole component. In this way, we can, uh, get out of that rendering issue. It it really, uh, help us to improve the performance of our application.

How do you manage global stage, uh, large scale issue without Redux? Uh, well, uh, managing, uh, global state management in last, large scale application, uh, without Redux would be really tough, uh, especially, uh, if if, uh, we have, uh, an any, uh, large scale reactivation, uh, we go with MobX or Redux. Uh, so with without Redux, uh, managing the state, uh, would be really, really difficult. Uh, eventually, uh, if if we will have any application, uh, and also we need to take care of the scaling, uh, we basically go to reducts or even, uh, Redux toolkit sometimes. Uh, depends upon the use case and all. Without reducts, it would, uh, be really very tough, uh, since it is, uh, large scale rate rectification. Uh, so there would be lots of pages pages out there. So, uh, to, uh, keep a global state, uh, and, uh, to keep the updated data to each each of the component out within that application would be really very tough tough, uh, and, uh, using app using prop trailing, uh, too too much would, uh, not be recommended. We never be, uh, recommended. Uh, so MobX, uh, can can be used there. Uh, and, also, uh, if possible, by any chance, uh, if we don't have the access of Redux, we can go with context API, uh, if we don't have, uh, in any other choice, obviously. And other than I don't really think, uh, there would be a choice. That that that is what we need to do. Either go with MobX or context API to keep uh, to manage, uh, the global state, uh, in a large scale, uh, rate, uh, rate application without, uh, Redux.

Uh, what approaches would you use in React, uh, to code splitting large application for better performance? Uh, well, uh, code splitting, uh, is a core concept, uh, in in software development, uh, in while port coding any web application or mobile application for by by type of performance, such as, uh, because of that, uh, the bundle size would not in increase much. Uh, and, also, uh, we can import the components with the lazy loading, uh, stuff. Uh, so with that, uh, the component will only get loaded whenever it is needed. Uh, so, uh, the approach would be using the atomic structure. So divide the main component, uh, uh, the main page into several, uh, required components, uh, or several required chunks such as, uh, buttons, input field, uh, and header, uh, sidebar, and all the stuffs should be a component. Uh, so if if we can divide each of the stuff into many component and also align, uh, altogether to create a page, it would be a a great approach, uh, for, uh, large scale application, uh, to have accurate performance. So, uh, this is what we should do, uh, in terms of, uh, having, uh, in in terms of ports plating, uh, into a a large scale application, uh, for better performance.

Until a scenario which, uh, you'd opt for fragment instead of dev in yet. Well, uh, if we don't really, uh, want to have any, uh, uh, default, uh, padding of margin, uh, defined by any tag, uh, such as, let's say, uh, for any default, uh, tag such as div or even p tag have some, uh, habits marginal padding. If we don't really have, uh, don't don't really want to have any of these, uh, we can go direct fragment. Uh, it it is only, uh, recommend, uh, required if you don't really want to go with, uh, any s HTML tag and all. Uh, just want to want to wrap all the component at at once so that we can put we can render the stuff conditionally. So, uh, in in that particular scenario, we can, uh, use, uh, react fragment rather than using any default, any other HTML tags.

How do you ensure that your data creation is, uh, SEO friendly extension with client side rendering? As, uh, managing SEO with, uh, client side rendering, uh, is a bit tricky. Uh, so, uh, for each of the application, we need to use, uh, the header tag and all. Uh, so in, uh, CSR or in in a react application, it is really very tough, uh, to manage. Uh, so for that, we can go to, uh, a library called react helmet. With that, we can, uh, put a custom header, uh, like, head tag and, like, the metadata and all for each of the pages for the each of the pages out there in our application, uh, which is really, really beneficial, uh, such as SEO of I mean, uh, such as managing SEO or, uh, and also Google crawler to find all the pages uh, with the their metadata, which basically helps us in SEO.

To ensure components compared to identify what the vehicle is used to explain its purpose. Also, spot any potential issue with the way it is implemented. Well, uh, useEffect, uh, re hook in React is, uh, used here. And also, uh, use state hook is used here to save, uh, to store the response of, uh, that API. Uh, so, uh, the main main issue is we should, uh, make, uh, any, uh, external, uh, API call, uh, that is, uh, con considered at as promised, uh, encoding. Uh, what we, uh, need to do here, we need to make a function with, uh, async and await. Uh, and also all all the stuff will be within try and catch so that if, uh, we'll have an any issue, while getting, uh, the response of that API, uh, so it it will, uh, get caught, uh, in the catch block of try and catch so that we can show that exact error in the UI, uh, which is really very beneficial. Uh, and also in terms of showing the loader, we can, uh, use another state, uh, like, another state state variable as load loader and set loader. Uh, so whenever the request starts, we can, uh, add update the set loading as, uh, true. And whenever it goes to the finally block, that's the 3 block out the within the async keyword as try catch. And finally within the final block, we would, uh, update, uh, the set loading as, uh, false. Uh, so in that meantime, whenever, uh, the loader state is true, it would show the loading in the UI. And, uh, so simply making some external API is a promise only, uh, which would, uh, which could could be even, uh, get accept accepted or even get rejected. Uh, so and, basically, it it might take some time even, um, 32nd to even 1 minute sometimes. So we need to put, uh, a a wait, uh, within the try block until and unless, uh, we, uh, the actual promise, uh, stuff, uh, gets completed. So, uh, it it will, uh, until that particular time, if we are having, uh, the response, uh, from that, uh, API endpoint would show the loader. Uh, the try catch and finally block will, uh, do its own stuff and, uh, we would use the load loading and set loading to show the loader appropriately. And also within the catch block, uh, we can, uh, have the exact error if, uh, there would be any, and we can use any toaster or something like that to show the user that, uh, there is some error.

You do the following c s. This one explains why the elements with boxed plus, uh, may not look identical across different web browser for any code changes. In the following scene, it will explain, uh, why the elements of box class, um, and not loop identical at first different browser. Try any code changes. Well, uh, the only issue, uh, here could be the box sizing. So it depends upon, uh, the content. So here you are, uh, saying, uh, like, it, uh, will it may not, uh, look identical across different web browser. So, uh, only browser specific, uh, would be the box sizing and all. So, uh, we need to, uh, we can go with something like, uh, display flex and all. Uh, so with that, uh, and the boxes within that, uh, flex flex box, we can manage, uh, with the specific styling such as, uh, justify content, uh, and also lnitem. And also, we can put the gaps, uh, as well. Also, we can go with this display grid, uh, tier, which is, uh, not really browser specific. So we that really, uh, works, uh, good, uh, in terms of browser issues and all.

That's the strategy, uh, you would implement for lazy loading component, uh, in reactivation. Uh, well, uh, I have implemented, uh, lazy loading, uh, component, uh, in break regulation a lot. Uh, so, uh, we so, uh, the main workaround, uh, of, uh, lazy loading, uh, is the component will only get loaded whenever it is needed. So, uh, we can, uh, use, uh, the we can import, uh, the that particular, uh, component, uh, as lazy loading only, uh, and also we can, uh, use the suspense and fallback boundary or suspense and fallback. Uh, like, we can wrap that particular component which are imported, uh, with lazy loading, uh, and, uh, within the suspense, we can show the loader or skeleton loader or something like that. When I whenever, uh, like, the time frame it is taking, uh, to get loaded in the UI, we can show on anything like a skeleton loaded and all to, uh, make a user interactive with the UI. Uh, These are the question, uh, Nari, uh, we can, uh, take while using lazy loading, uh, component in create application.

How will you integrate TypeScript, uh, in project to improve code readability? Well, uh, TypeScript fairly, uh, help us in project improve code readability. In terms of, uh, we need to define, uh, the, uh, interface interface of each each of the comp component, uh, components props. Like, what are the props we'd really uh, send, uh, of of what we, uh, expect to have in a particular component. So if if it would not get satisfied, uh, there will be an error. And, also, uh, apart from, uh, the strict mode of React, Patch script also render, uh, renders, uh, the stuff once again so that, uh, there are less chance of getting error, uh, in in the in making the build of our application, which is, uh, very beneficial, uh, in terms of the code. Uh, like, there are less chances, uh, like, a code would not work, uh, in in the prod. Uh, so working with TypeScript, uh, in in React is, uh, really been beneficial in terms of uh, adding, uh, each of the, uh, like, using interfaces, uh, of each of the, um, uh, states. Each each of the variable we detail within our application so that, uh, there will not be any chance, uh, to get a variable, uh, get assigned with some, uh, unrecognized, uh, value app or like that. So all the variables will, uh, will be in our control such as, like, whatever, uh, the interfaces we have declared. We will only have, uh, the values from that particular interface only. There will not, uh, be any value assigned to that particular variable other than the variable, uh, the sorry. The type that we assign to that variable.

In this private situation, we are using Vect portals, enhanced use projects, UI UX. Well, since, uh, React is a single page, uh, application only, uh, which works with a different algorithm, So it really, uh, helps us in, uh, good performance. Uh, but in terms of enhancing projects, UI UX, uh, we basically, uh, rely on, uh, some particular libraries, uh, such as chakra UI or m u I or something like that, uh, with which, uh, we can achieve, uh, some good styling within our React project. Uh, so using React, uh, in terms of enhancing our projects, uh, UI UX, the main part would be, uh, we can, uh, the whole application would be in component base. So we can we all only need to, uh, design, uh, a button, uh, once only, uh, and we we can, uh, replicate, uh, that again and again, such as we can call that particular button, uh, that particular component in anywhere in the application we want. And, also, we can manage the functionality with, uh, the with managing the props and all. Uh, so with React, uh, managing the, uh, projects UI UX, uh, like, such as designs and all, uh, is pretty easy. Like, we, uh, don't really need to, uh, repeat, uh, the same stuff again and again. And, also, we can, uh, go with some, uh, other libraries to achieve our desired styling within our application.