Using tooltips causes crash

[robsassack]

I'm not sure if this is something to do with specifically moving it quickly or just by hovering over certain elements but I have come across a bug that causes the entire page to crash if using the tooltips.

Video reproducing the bug:

https://user-images.githubusercontent.com/91514586/221693819-54a9a618-d2e3-40b9-9a16-a8166d7dc6a0.mp4

Error log in my own project: react-dom.development.js:27292 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates (react-dom.development.js:27292:11) at scheduleUpdateOnFiber (react-dom.development.js:25475:3) at Object.enqueueSetState (react-dom.development.js:14067:7) at Component.setState (react.development.js:354:16) at ReactTooltip2.updatePosition (index.js:756:19) at ReactTooltip2. (index.js:757:14) at callCallback (react-dom.development.js:13923:12) at commitUpdateQueue (react-dom.development.js:13944:9) at commitLayoutEffectOnFiber (react-dom.development.js:23364:13) at commitLayoutMountEffects_complete (react-dom.development.js:24688:9) checkForNestedUpdates @ react-dom.development.js:27292 scheduleUpdateOnFiber @ react-dom.development.js:25475 enqueueSetState @ react-dom.development.js:14067 Component.setState @ react.development.js:354 updatePosition @ index.js:756 (anonymous) @ index.js:757 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23364 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 commitRootImpl @ react-dom.development.js:26959 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25981 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533

react_devtools_backend.js:2655 The above error occurred in the component:

at ReactTooltip2 (http://127.0.0.1:5173/node_modules/.vite/deps/react-tooltip.js?t=1677533472164&v=b1b58315:3029:5)
at article
at ActivityCalendar (http://127.0.0.1:5173/node_modules/.vite/deps/react-github-calendar.js?v=b1b58315:14077:9)
at GitHubCalendar (http://127.0.0.1:5173/node_modules/.vite/deps/react-github-calendar.js?v=b1b58315:14330:9)
at div
at Calendar
at div
at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. overrideMethod @ react_devtools_backend.js:2655 logCapturedError @ react-dom.development.js:18687 update.callback @ react-dom.development.js:18720 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23391 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 commitRootImpl @ react-dom.development.js:26959 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25981 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533

react-dom.development.js:27292 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates (react-dom.development.js:27292:11) at scheduleUpdateOnFiber (react-dom.development.js:25475:3) at Object.enqueueSetState (react-dom.development.js:14067:7) at Component.setState (react.development.js:354:16) at ReactTooltip2.updatePosition (index.js:756:19) at ReactTooltip2. (index.js:757:14) at callCallback (react-dom.development.js:13923:12) at commitUpdateQueue (react-dom.development.js:13944:9) at commitLayoutEffectOnFiber (react-dom.development.js:23364:13) at commitLayoutMountEffects_complete (react-dom.development.js:24688:9)

[robsassack]

I just wanted to note that despite my example showing this for the react-github-calendar project, I was able to reproduce this in the storybook for this project so I think it may be an issue either with this project or with react-tooltip.

[grubersjoe]

Hey. I'm having a hard time being able to reproduce this. You're using Chrome, right? Can you share how exactly you're using <GitHubCalendar />? Like what props are set etc.

Can you maybe share the repository where this occurs?

[robsassack]

Yes, this is in Chrome (110) running on Windows 10. I currently have hideColorLegend, hideMonthLabels, transformData, and transformTotalCount but I was able to recreate it in the examples on your preview sites. It may be possible that zooming the page may have something to do with it (anything past 200% or so), I am able to reproduce it faster when doing that.

Here's my repo I was working on when I came across this bug, it is inside the calendar-tooltips fork: https://github.com/robsassack/robsassack.github.io/tree/calendar-tooltips