Here I'm talking about my website. It's my portfolio website and one thing I was sure that I needed one. I have this one from past two years and time to time I'm trying to improve it.
The Problem
We need to improve or fix something when there is a problem. And the problem with my website was each time I used to switch to new route my component used to mount again and api call used to fire to fetch data.
Issues with this
- User have to wait until component render data
- API used to fire again an again to get data
- Website used feel slow
- All the state data used to reset
Findings
When I look online it says whenever we change path, in react it mount that component again. But I was thinking why the online website does not behave like mine one does.
I asked my friend Mohit and Anurag as both were working with React JS from couple of years.
The conclusion of the discussion was to use redux and have a state to check whether user visited that page or not and according to that in ComponentDidMount trigger animation or fetch API .
Implementation
After adding redux and all other checks in ComponentDidMount , the redux state used to reset whenever I used to change my route. I thought my be its because I'm using class component but its should not matter whether its class or functional because store should not reset because of it.
So I went to basic, I looked online How one navigate to another page. Thats where I found my mistake.I was using Anchor Element to navigate to another page where everyone was using one of the following method
1.Link
<Link to="/path" className="btn btn-primary">Navigate</Link>
2.Redirect (From react-router)
<Redirect to='/myComponent' />
3.Using history prop
props.history.push('/path')
I ended up using history prop to navigate between my pages. So the combination of redux state check and navigating using history prop I'm able solve my problem.
Things Improved
- No multiple calls to API for data
- User does not have to wait
Maybe I'm right maybe I'm wrong but for now It's how I resolved it. Do let me know guys if you hsave any other solution by commenting below.
If you want to read more Do visit my website. Cheers.
Top comments (8)
Hi! I took a look at your website and have 3 recommendations:
point 2 and 3 are personal recomendations. Hava a nice day!
Thank you for feedback. I made the changes, Also I completely redesign my website , Have a look pradnyanandpohare.in thank you.
And these is another problem with it also, it ain't mobile first. Something that goes without saying.
dev-to-uploads.s3.amazonaws.com/up...
Yes, that's why I completely redesign website to make is more readable , Have a look pradnyanandpohare.in thank you. I
Improved site design. I liked the simple approach now and that it now works on mobile. Good work!
Sorry but I can't give up my truth saying behavior, so have you tried optimising gallery photos for faster loading time, and why lobster? Pick some great typography instead of that.
Sure. I'm going to improve Images, Fonts from the site. Thank you for the feedback.
I wonder how you did not realize that whole page and its components are rendered everytime you visit that page because of anchor tag. Anyway congratulations on you achievement
Crazy right, I knew the problem but had lazy attitude to fix it, but better late than never ;)