I am building a transport web app of my University as a Project. I have this “BussPass” component which is belo:-
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import Header from '../components/header';
import Footer from '../components/footer';
import { FaAddressCard, FaRupeeSign } from "react-icons/fa";
import PU3 from "../assests/PU3.png";
import NAAC from "../assests/NAAC.png";
import My from "../assests/My.jpg";
import { MdDownload } from "react-icons/md";
import { FaMoneyCheckDollar } from "react-icons/fa6";
import axios from 'axios';
import { usePDF } from 'react-to-pdf';
import "../index.css";
const BusPass = React.memo(() => {
console.log("BusPass Rendered");
const user_id = sessionStorage.getItem("user_id");
const [userData, setUserData] = useState([]);
const { toPDF, targetRef } = usePDF({ filename: `${user_id}_BusPass.pdf` });
const getUserInfo = useCallback(async () => {
if (!user_id) return;
console.log("Fetching Data");
try {
const response = await axios.post("https://putms.onrender.com/getUserInfo", { user_id });
setUserData(response.data);
} catch (error) {
console.error('Error fetching user data:', error);
}
}, [user_id]);
useEffect(() => {
getUserInfo();
}, [getUserInfo]);
const feesPaid = useMemo(() => userData.Bus_Fees_Paid === "Yes", [userData.Bus_Fees_Paid]);
const openRazorpay = useCallback(() => {
const options = {
key: "rzp_test_CXhrGKDYeZO527",
one_click_checkout: true,
amount: 22000 * 100,
name: "Parul University Transport Department",
order_id: "",
show_coupons: true,
callback_url: "https://eneqd3r9zrjok.x.pipedream.net/",
handler: (response) => {
axios.post("https://putms.onrender.com/payment", { response, user_id });
}
};
const rzp1 = new window.Razorpay(options);
rzp1.open();
}, [user_id]);
return (
<>
<Header />
<div className='w-full h-[30rem] flex px-2 bg-slate-200'>
<div className='w-2/3 m-3 bg-slate-100 p-3 cursor-pointer shadow-lg' ref={targetRef}>
<div className='flex space-x-2 text-center items-center text-blue-500'>
<FaAddressCard className='text-3xl mb-2' />
<h4 className='text-center font-semibold'>BUS PASS</h4>
</div>
<div className='h-[0.1rem] bg-slate-200 w-[100%]'></div>
<div className='border border-black h-[22rem] my-3 hover:bg-slate-50'>
<div className='h-[5.5rem] flex justify-between py-2 px-4 bg-green-600'>
<img src={NAAC} alt="Naac" className='w-1/3 h-full p-1' />
<img src={PU3} alt="PuLogo" className='w-1/3 h-full' />
.
.
.
And so on...
But while I was checking the performance of my app, I noticed that everytime I go between different routes and come back to this route, it is getting re rendered which should not be happening. I have tried everything I knew to fix it but it didnt help. I even tried ChatGPT to solve but that too was not helping. Can anyone point out where exactly is my mistake and why is my component re rendering each time?
