Jaya Soni

Yeah. So talking about, uh, uh, the strategies, uh, I have implemented to optimize the React applications for, uh, the performance is, uh, like, I have worked on a project, and it was, like, facing, uh, some, uh, issues, uh, while loading the data. So I have implemented for like, basically, uh, to optimize React applications. I have used, uh, the lazy loading, uh, and I've implemented the lazy loading, uh, technique in there and the strategy so that, uh, what it happens is, uh, when, uh, like, it will load initially, it will load only that data what we want to, uh, like, show at the initial level of our application when it starts loading. And when we gradually move to the that particular component or the particular page, so it will load at the time only when we want to. So I have applied that lazy loading in that particular section. So when it comes to the screen, then only it will appear, uh, to the, uh, view, uh, uh, to the user. So it will, uh, help in optimizing the, uh, like, React applications. Uh, and, uh, one of the, uh, other, uh, which I, uh, I know I mean, the strategy to, uh, like, improve the performance of the application is, like, uh, we can, uh, use the use memo, uh, method, uh, use memo hook, uh, inside that so that it will also help in, uh, like, the if like, it will boost up the, uh, application's performance. Uh, so these, uh, are the strategies which I know, but, basically, which I work upon was lazy loading, which I have, uh, uh, narrated in that.

So, uh, when I talk about, uh, to prevent the vulnerabilities when working with React, so it's like, uh, when we have, uh, when we are reusing the logic inside of, uh, inside, like, more than 1 or 2 components, so we have to make sure that, uh, it will not overlap to the other, uh, components, or it will not affect the working, uh, structure of, uh, or the loading portion of the, uh, React application. So we need to take care of that. And, uh, another thing is that, uh, like, uh, if we have we are facing such kind of, uh, issues, so we, uh, we have to apply any uh, solutions, uh, for optimizing that, uh, thing. And the other thing is, uh, is that what we can do is we can, uh, like, we can make the structure, uh, to the point, code structures that we can write we like we can follow the code structure patterns. And another thing is that, uh, what we can do is inside that, like, we can write the less number of, uh, codes. Uh, like, just try to avoid the long number of, uh, codes in an, uh, component so that it will be easier to, uh, like, uh, debug the application when it it is fail we are facing any problems while running the application. So React is based on the component structure. So, like, like, we can create the components and we can, uh, import that in that particular another conference that it would be easier to gauge the everything. So these are some of the steps, like, follow to create the vulnerabilities when working with React.

Uh, basically, server side rendering, uh, like, it's it's one of the major part when when we talk about the React app's performance. And, uh, like, I'm not getting any scenario regarding that, which, uh, basically, um, if I talk about the server side rendering. So when we used to, uh, it's basically when we are using the APIs in an application. So when we are fetching the API so, uh, in in that scenario, uh, we are using the server side rendering because when we are fetching the data from the, uh, like, another, uh, server, Like, the APIs we are fetching to load the data of in our, uh, application. So for that, um, it's like it will take some time because it's an asynchronous programming. So we don't know how much time it will take because it's it's it's in a are taking the data from the another server inside our application. So, obviously, it will take a little bit of, uh, time. But, uh, while using some methods inside our application, uh, like, uh, like, promises or, uh, the asynchronous methods, like async or await, uh, with, uh, along with the fetch methods. Uh, with that, we can easily, uh, easily, uh, implement a good uh, performance in inside the application. It will give a good effect as well. So, overall, the experience of, uh, the user will be good. Along with that, we can apply a loader, uh, inside that. So what will happen if we are facing some, uh, loading, uh, time or we if it is taking some time to load the data. So what with the help of loader also, we we will take some time to show the data inside the, uh, inside the, uh, web application. So, like, uh, it will be helpful, uh, and, uh, and, like, it will help in, uh, like, improving the React application performance.

Basically, I haven't worked much on this refresh token concept. Um, it's like, uh, when we used, uh, when we are using this concept inside our application. So what it will do, it will, uh, at the back end side, uh, it will when we'll, uh, click or when we'll apply that function, uh, inside, uh, our application, um, and we can do that by triggering an action using a button or something like that. So when we click on that, so it will trigger that function inside that inside that we have used a refresh, uh, like, refresh token concept. So what it will do is uh, it will basically, um, at the back end side, it got, uh, um, I mean, it's kind of refresh the, uh, web page. And what it will do, it will clear all the uh, datas or it will clear the caches, uh, at the running at the background, and it will, uh, start the fresh uh, it will, uh, it will clear the things, uh, at the back end side so that, uh, that eventually refresh all the data in the application, and the application will restart again or the page will refresh, uh, refresh, and it will start again with the initial, uh, level.

Uh, if we do if we talk about, uh, tools or techniques for cross browser compatibility is, like, uh, we have used, uh, like, tools are, like, like, inside the, uh, network tab, we can see how, uh, we can check, uh, the compatibilities, and we can add some extensions into our browser to make it work, uh, with the React applications and to check the process so we can, uh, use the, uh, many things. I mean, we can use the React. We can use the React app, like, extensions like that. So, like, Redux dev tools were there. So, uh, it's like with the help of those, we can, you know, easily these are some of the techniques for the cross compatibility cross browser compatibility in React app, uh, applications.