Abhishek Tiwari

Hi. My name is. I'm from Varanasi, Uttar Pradesh. I have been working in a start up company as a software developer in front end technology. And, uh, I've been working there last 3 years. And I have worked for the different different industry like media, new logistic, and some in houses project. And my tech stack is HTML, CSS, JavaScript, some library like React, and some framework like Next. Js. And I'm learning some new CSS, like, framework like, and some uh, other programming language like TypeScript. These are the pretty and pretty good introduction about myself.

So when we are, like, when we are working with the Figma design, and we are trying to make the React component for that, so we look each and every layout from the Figma, and there is there is specific, color, sizes, all this thing. And we according to that, like, based on the design, like, based on the Figma design, we create the component according to, like, we have in on the Figma, we have header, we have footer, we have content, we have new bar, And we have some other features like other animation. So we just follow all the design. And based on the design, we create the, uh, component. And we, basically, we use that component to make the reusable throughout the application.

Yeah. So, basically, I was working for a media channel, and there was, like, uh, 1.5 to or 2.1000000 user regular basis. So that project was on the based on the next years. And I was, like, creating the pages based on their demand. Like, what kind of pages we want to display. We want to display the server side pages. We want to do the, uh, client side client side uh, rendering. So on that, like, if you want to create like, if you want to build the pages based on the client side rendering, so we can use the static generation. And if their page is supposed we want to prerender the pages or we want to make that page in server side rendering. So with the help of get static server side props, we use that to make the server side render to the page. For the static generation, we get we use the get static props. Uh, for the server side rendering, we use the get server side render props. So with the help of that, we can make the client side rendering and the server side rendering. There are another method like incrementers, uh, incrementers, regenerators, re regenerations, uh, rerendering. So with the help of that, we can revalidate all server side render with specific time. We we have passed some keyword, like, revalidate validate. So each and every second, like, whatever we define inside that, like, 3 second, 4th second. So according today, it it generate the new pages at each NDA request.

Yeah. So for the, like, for for the performance optimization purpose, we follow the different different, you know, techniques. So, like, so we have first we we first follow we follow the code based splitting. Like, uh, based on the code, like, based on the demand, we saw the content of the component. So we do the component based on the code splitting, based on the component. We can do the code splitting based on the route. We create the we create the dynamic route for that. And inside that, we create the suspense. And inside suspense, we create the, uh, fallback image. If something wrong, that fall we fallback image will be rendered. So this is the first technique, and we perform some re rendering. Like, uh, how to optimize? We can optimize the re rendering. So we can use the pure component. You we use the use memo. You we use callback use callback. So this technique to optimize the rerendering of the page. And we follow some other technique, like lazy loading to optimize the image based on the demand it should load the image on the viewport. So we follow that. We another method, we try to use the CDN to access the like, we have stored some emails somewhere else. So we don't, uh, put the image in our code base each and every image. So we create the CDN for that. So the CDN will be helpful to get the image faster and a more reliable way. So in this way, we can optimize the and we can some you do we can do some web cap web web configuration. So webpack, we you did we can do some some configuration inside the webpack. So in the these are the way we can optimize the React application.

Yeah. So to develop a robust error handling system with React, like, we can follow the different different approach. We have some other dealing with the API, we can use the try catch. When we try to capture any either handling based on the component, like, whatever the component is showing some hand error, we can capture that error inside that component by using the prop type. We do the some, um, like, we do some props validation over there. And, uh, and, like, we we can create some page 404 page with the different level. Like, we can create the custom error page with the help of the prop type. Yeah. So, like, yeah, the prop type will provide some error boundary concept. We can use that to capture the error from the component. Yeah. So error bounding is mostly used for the custom creation. Yeah. To capture the any the React, uh, component here.

Yeah. So, um, I think there should be a dependency at a with the huge effect like because now each and every time your useEffect will be run. Yeah. So we can we can we we can provide some dependency and then use effect.

So, like, with the with the help of the customer owner, we create the custom move to fetch the data from API. And there, we, uh, get the data, like, by using the custom hook. We can create the data data fetching mechanism inside the custom hook. And we can use that custom hook in in every component where we want to render the data.

So the I will, like, I will, uh, recommend the best practice for the React project. So first, create the folder properly. Yeah. So each and every folder has some meaning. What kind of, uh, component you are going to make that inside that folder. And please keep your component as much as usual. So according to that, you create the component we which are using multiple time in throughout the app react application to keep, uh, uh, keep the, uh, the component the usual and some, like, other file, like image and some other resources, we can put the SS module. Keep the component name, whatever layout to your DN, like, header your DN to keep the component name header. Follow some, like if you are using some data, which are you constant and you used multiple places, so you can you put that data inside the constant file. You can create the util file util folder to create any function we which are utilized in throughout the project in multiple times. So these are the way of initial way you can follow that. Then you can optimize your web app using the different different technique, using the uh, huge memo, huge huge a huge more huge layout effects. Yeah. Actually, you can make the component pure component. So these are the way you can follow the best practices for the React project.

Like, when when I am trying to implement any any external API integration with the re React now, so I follow the, uh, huge effect. It's like, huge effect is used for the handling the any, um, and anything which are happening outside of the component, which are which are also known as the side effects. So we are dealing with any API. The act we use the u huge effect. Inside that huge effect, we can have, like, capture the data from API. And in the next years now, is it is the based on what kind of, uh, data fetching you want to do. You want to client side rendering data fetching method, or you want to send a server side render data method fetching data method. So in next year, we have for the client side rendering, we use the get chat x prop. For the next year, to make the server side rendering, we use the get server side prop. So is this way we can, uh, capture the external API. Data from the external API. We can use the client side rendering for the next inside the next, yes, ma'am. We can also use the huge effect for the client side rendering. These are the way we we can face the data in react project and next year's project.