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.