Calendar page memory leak on frontend
Closed this issue · 3 comments
Calendar page somehow shows components from both the if and else portion of a ternary expression at the same time. Debug console error indicates that is is likely the result of a memory leak.
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak
in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at CalendarPage (http://localhost:3000/static/js/main.chunk.js:510:5)
at component
Memory leak is fixed in e8b7ac3
The useEffect method should return a cleanup function when using async methods within it. This was causing the memory leak.
Notably, the memory leak was not causing the issue with the way the calendar is displayed. I will continue looking into the visual bug.
Progress check: The memory leak warning from the console should be completely sorted out now. Additional checks were added in c721175 to ensure that only one GET request is fired per page load.
This means there may be an unrelated cause to the visual bug. I included a screenshot below which shows that the loading spinner as well as the card list are both being displayed, even though the ternary expression explicitly shows that only one of these components should be displayed at a time. Ternary expression is on line 50 of CalendarPage.tsx.
Embarrassingly the issue was never related to anything significant, it was simply caused by me adding the spinner component to the calendar object (so there were two of the same component). Closing this issue now.