Infinite render loop when tooltip is on the right edge of the page
srmagura opened this issue · 0 comments
srmagura commented
CodeSandbox here
import ReactHintFactory from "react-hint";
const ReactHint = ReactHintFactory(React);
export default function App() {
return (
<div>
<ReactHint events />
<div
style={{
minHeight: "100vh"
}}
>
<div
style={{
padding: "1rem",
backgroundColor: "hsl(0, 0%, 92%)",
display: "flex",
justifyContent: "flex-end"
}}
>
<button data-rh="Add top-level category">OK</button>
</div>
</div>
</div>
);
}
Everything in this example besides the backgroundColor
is necessary to reproduce the bug.
Error message when hovering over the button:
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:23803)
at scheduleUpdateOnFiber (react-dom.development.js:21835)
at Object.enqueueSetState (react-dom.development.js:12467)
at ReactHint.Component.setState (react.development.js:365)
at ReactHint.eval [as getHintData] (index.js:213)
at ReactHint.componentDidUpdate (index.js:232)
at commitLifeCycles (react-dom.development.js:20684)
at commitLayoutEffects (react-dom.development.js:23426)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at commitRootImpl (react-dom.development.js:23151)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at commitRoot (react-dom.development.js:22990)
at performSyncWorkOnRoot (react-dom.development.js:22329)
at eval (react-dom.development.js:11327)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at scheduleUpdateOnFiber (react-dom.development.js:21893)
at Object.enqueueSetState (react-dom.development.js:12467)
at ReactHint.Component.setState (react.development.js:365)
at ReactHint.eval [as getHintData] (index.js:213)
at eval (index.js:77)
The above error occurred in the <ReactHint> component:
at ReactHint (https://1z08p.csb.app/node_modules/react-hint/lib/index.js:30:31)
at div
at App
I will look into fixing it myself but help would definitely be appreciated!