🐞 [BUG] - Endless Console Logging and Error in Hackathon Page

[Nishitbaria]

Description

On the hackathon page of our application, we are currently experiencing two significant issues that are negatively impacting both performance and developer experience. Issue Description:

On the hackathon page of our application, we are currently experiencing two significant issues that are negatively impacting both performance and developer experience.

1. Endless Console Logging:

We have identified that there is an endless console log being generated on the hackathon page. This issue results in an excessive number of log messages being printed to the console within a short period of time. For instance, we observed that approximately 3225 console log messages are generated in just 10 seconds. This has a negative impact on debugging efforts and can slow down the application's performance.

2. useEffect Error: Maximum Update Depth Exceeded:

Additionally, we have encountered an error related to the use of the useEffect hook on the hackathon page. The error message states:

"Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."

This error suggests that there is a problem with how the useEffect hook is being used on the page. It's causing an infinite loop of state updates and rendering, which not only results in poor performance but also degrades the developer experience by making debugging challenging.

Expected Behavior:

We expect the hackathon page to function without generating an excessive number of console log messages and without triggering the "Maximum Update Depth Exceeded" error due to incorrect usage of the useEffect hook.

Steps to Reproduce:

1. Navigate to the hackathon page.
2. Open the browser console to observe the continuous console log.
3. Notice the "Maximum Update Depth Exceeded" error in the console.

Current behaviour

The current behavior of the hackathon page is detrimental to both developers and users. It leads to performance degradation, cluttered console logs, and impaired developer productivity. Addressing these issues promptly will contribute to improving the page's overall performance and enhancing the development workflow.

Expected behaviour

We expect the hackathon page to function without generating an excessive number of console log messages and without triggering the "Maximum Update Depth Exceeded" error due to incorrect usage of the useEffect hook.

Reproduction steps

**Steps to Reproduce:**

1. Navigate to the hackathon page.
2. Open the browser console to observe the continuous console log of varirany:primary.
3. Notice the "Maximum Update Depth Exceeded" error in the console.

Screenshots

https://github.com/anmode/grabtern-frontend/assets/85815172/93028eea-a01c-4102-8d17-f05b1ea377e5

Logs

No response

Browsers

Microsoft Edge

OS

Windows

Are you contributing for a program ?

GSSoC2023

Code of Conduct

• [X] I have read and agree to the Contributing Guidelines of this project.

[github-actions[bot]]

Hello @Nishitbaria! Thank you for raising this issue. Please make sure to follow our Contributing Guidelines. Don't forget to ⭐ our Grabtern-Frontend.

Our review team will carefully assess the issue and reach out to you soon! We appreciate your patience!

[Nishitbaria]

@anmode ,please assign me this issue