Abhishek Tiwari

Hi. My name is. I'm from Varanasi, Uttar Pradesh. I have been working in a startup company as a software developer in front-end technology. And I've been working there for the last 3 years. And I have worked for different industries like media, new logistics, and some in-house projects. My tech stack is HTML, CSS, JavaScript, some libraries like React, and some frameworks like Next.js. I'm also learning some new CSS frameworks and other programming languages like TypeScript. These are my qualifications and skills.

So when we are working with the Figma design, and we are trying to make the React component for that, we look at each and every layout from Figma, and there are specific colors, sizes, and other things. We create the component according to the design, based on the Figma design. We have a header, a footer, content, a navigation bar, and other features like animations. We follow the design closely, and based on that, we create the component. We then use that component to make it reusable throughout the application.

Yeah. So, basically, I was working for a media channel, and there were approximately 1.5 to 2.1 million regular users. So that project was based on the next year's requirements. And I was creating the pages based on their demand. What kind of pages we wanted to display. We wanted to display server-side pages. We wanted to do client-side rendering. So, if you want to create pages based on client-side rendering, you can use static generation. And if the page is supposed to be prerendered, we want to make that page in server-side rendering. With the help of getStaticProps, we use that to make server-side rendering of the page. For static generation, we use getStaticProps. For server-side rendering, we use getServerSideProps. With the help of that, we can make client-side rendering and server-side rendering. There are another method like incrementers, regenerators, re-regenerations, and rerendering. So with the help of that, we can revalidate all server-side renders at a specific time. We have passed some keywords, like revalidate and validate. Each second, whatever we define inside that, like every 3 seconds or 4th second. So, according to that, it generates new pages at each NDA request.

Yeah. So for the performance optimization purpose, we follow different techniques. So we first follow code-based splitting. Based on the code and demand, we see the content of the component and do component-based code splitting based on the component. We can do code splitting based on the route. We create dynamic routes for that. And inside that, we create suspense. And inside suspense, we create a fallback image. If something goes wrong, the fallback image will be rendered. This is the first technique, and we perform some re-rendering. To optimize re-rendering, we can use pure components, use memo, and callback. This technique optimizes the rerendering of the page. We also follow other techniques, like lazy loading, to optimize image loading based on demand. It loads the image when it's in the viewport. We also try to use a CDN to access images stored elsewhere. We don't put images in our code base. Instead, we create a CDN for that. The CDN helps get images faster and in a more reliable way. We can also optimize the application by configuring webpack. These are the ways we can optimize a React application.

So to develop a robust error handling system with React, we can follow different approaches. We have some other dealing with the API, we can use try-catch. When we try to capture any error based on the component, like, whatever the component is showing some error, we can capture that error inside that component by using prop types. We do some props validation over there. And we can create a 404 page with different levels. Like, we can create a custom error page with the help of prop types. So, prop types will provide the error boundary concept. We can use that to capture the error from the component. So, error boundaries are mostly used for custom creation. To capture any React component errors.

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

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

So I will recommend the best practice for the React project. So first, create the folder properly. Yes. Each folder has some meaning, and according to that, you create the component which you are going to use multiple times throughout the app in React application. To keep the component usual, you can create a separate file for it. You can also put some other files like images and resources in the same folder. For example, you can put the component named 'header' in a folder named 'header'. If you are using some data that is constant and used multiple places, you can put that data inside a constant file. You can also create a util file in the util folder to create any function that you are utilizing in throughout the project in multiple times. So these are the initial ways you can follow. Then you can optimize your web app using different techniques, such as using memoization, making components pure components, and using layout effects. Actually, you can make the component a pure component. So these are the ways you can follow the best practices for the React project.

When I am trying to implement any external API integration with React, I follow the huge effect. It's huge effect is used for handling anything which are happening outside of the component, also known as side effects. So we are dealing with any API, and we use the huge effect. Inside that huge effect, we can capture the data from API. And in the next step, it's based on what kind of data fetching you want to do. You want to use the client-side rendering data fetching method, or you want to send a server-side rendering data method. So in next steps, for the client-side rendering, we use the getChatX prop. For the server-side rendering, we use the getServerSideProps. This way we can capture the external API data. We can use the client-side rendering for fetching data inside the component, yes. We can also use the huge effect for the client-side rendering. These are the ways we can fetch data in a React project and Next.js project.