DEV Community

Pradnyanand Milind Pohare
Pradnyanand Milind Pohare

Posted on

The Problem With My Website

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>
Enter fullscreen mode Exit fullscreen mode

2.Redirect (From react-router)

<Redirect to='/myComponent' />
Enter fullscreen mode Exit fullscreen mode

3.Using history prop

props.history.push('/path')
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (8)

Collapse
angelsucasas profile image
angelsucasas

Hi! I took a look at your website and have 3 recommendations:

  1. Fix "wroking" to "working"
  2. The imagen on the left of you standing looks weird without the feets, fix that and it would look waaaay better.
  3. I would put all the link above the text on the right. (look at the image, on the box that have a 3 inside). dev-to-uploads.s3.amazonaws.com/up...

point 2 and 3 are personal recomendations. Hava a nice day!

Collapse
paddy57 profile image
Pradnyanand Milind Pohare Author

Thank you for feedback. I made the changes, Also I completely redesign my website , Have a look pradnyanandpohare.in thank you.

Collapse
hugekontrast profile image
Ashish Khare😎 • Edited

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...

Collapse
paddy57 profile image
Pradnyanand Milind Pohare Author

Yes, that's why I completely redesign website to make is more readable , Have a look pradnyanandpohare.in thank you. I

Collapse
hugekontrast profile image
Ashish Khare😎

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.

Thread Thread
paddy57 profile image
Pradnyanand Milind Pohare Author

Sure. I'm going to improve Images, Fonts from the site. Thank you for the feedback.

Collapse
rawas_aditya profile image
Aditya Rawas

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

Collapse
paddy57 profile image
Pradnyanand Milind Pohare Author

Crazy right, I knew the problem but had lazy attitude to fix it, but better late than never ;)