[BUG] profile page is rendering twice

[sital002]

Description

Steps to reproduce:
Go to https://www.biodrop.io/eddiejaoude
When going from the links tab to other tabs the page renders twice. You can see a flicker when you change the tab from links to other tabs.

Screenshots

No response

Do you want to work on this issue?

Yes

Additional information

No response

[github-actions]

To reduce notifications, issues are locked until they are 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned) and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[eddiejaoude]

Thanks for raising the issue @sital002 - when navigating between the tabs we add to the browser history using the built-in router but this causes a reload. I think we might be able to use React Memo here?

[Abhishek-90]

@eddiejaoude correct me, but are you talking about wrapping the page entirely inside useMemo hook which returns the page only when there is a change in the tab url parameter?

[eddiejaoude]

I am not sure, it is a idea, I think some research needs to be done

[Abhishek-90]

@eddiejaoude if it is okay, I would like to take it up and being some research right away.

[eddiejaoude]

Please do some research and make suggestions on how to solve before we assign, this will avoid blocking the issue

[sital002]

I have already implemented similar feature on repos page https://www.biodrop.io/repos where the filter options is updated on the browser url we could do the same for this one as well.
Can you assign this to me

[eddiejaoude]

Sure @sital002 but could you also please share the solution you took here so others can learn from it

[github-actions]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[sital002]

For the repos page, I added the query params to the URL which will rerender the page and rerun the getServerSideProps, and fetch the data from the database but in the profile page when we add the query param tab to the URL the getServerSideProps method is rerunning which is causing the page to re-render multiple times. We can stop the re-running getServerSideProps by adding the property shallow: true on the router.push() method which will prevent running getServerSideProps here is docs for shallow:true property https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating#shallow-routing.

[eddiejaoude]

Sounds good 👍 We have a similar issue here I think? #9248 (review)